zoukankan      html  css  js  c++  java
  • JSX语法及特点介绍

    1.1 基本语法

    1)自定义组件名首字母大写;元素名即组件名,首字母需要大写。首字母小写时React会以为这是HTML的标准标签,因此自定义的组件名需要首字母大写,否则会报错。

    2)嵌套;在render函数中return返回的只能包含一个顶层标签,否则也会报错。如:

    class HelloWorld extends React.Component{
        render(){
           /* return (
                 <h1>title</h1> 
                 <p>Hello world</p>
            )*/  // 返回两个顶层标签,报错
            return (
                <div>
                    <h1>title</h1>
                    <p>Hello world</p>
                </div>
            )
        }
    }

     3)求值表达式;JSX基本语法规则,遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头),就用JS规则解析。

     4)驼峰命名

     5)htmlFor,className;添加组件属性,需要注意,class属性需要写成className,for属性需要写成htmlFor,因为class和for是JS保留字 .组件的属性可以在组件类的this.props对象上获取,比如name属性可以通过this.props.name读取。

     6)JSX允许直接在模板插入JS变量。如果这个变量是一个数组,则会展开这个数组的所有成员

    <script type="text/jsx">
        var arr=[
         <h1>Hello world!</h1>,
         <h2>React is awesome</h2>
        ];
        React.render(
         <div>{arr}</div>,
         document.body
        )
    </script>

    7) 在JSX中插入用户输入是安全的,默认情况下ReactDOM会在渲染前,转义JSX中的任意值,渲染前,所有的值都被转化为字符串形式,这能预防XSS攻击。

    1.2 注释

    注释可以添加在两个部分,

    1)子节点中,子节点中时,添加多行注释需要用{/**/}大括号包起来。不能添加单行注释

    2)属性中;多行注释直接/**/注释,单行注释用//,并且需要换行

    class HelloWorld extends React.Component{
        render(){
            return <p
              /*添加多行注释到属性中*/
              name="test" // 添加单行注释后,需要换行
              >Hello world
             {/*添加多行注释到子节点中,用大括号包起来*/}</p>
        }
    }

     

    1.3 条件判断的四种写法

    1) 使用三元表达式

    var HelloWorld extends React.Component{
        render() {
              const isLoggedIn = this.state.isLoggedIn;
              return (
                   <div>
                      {isLoggedIn ? (
                        <LogoutButton onClick={this.handleLogoutClick} />
                         ) : (
                         <LoginButton onClick={this.handleLoginClick} />
                       )}
                  </div>
         );
        }
    }

    2)使用变量

    class LoginControl extends React.Component {
      constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn: false};
      }
    
      handleLoginClick() {
        this.setState({isLoggedIn: true});
      }
    
      handleLogoutClick() {
        this.setState({isLoggedIn: false});
      }
    
      render() {
        const isLoggedIn = this.state.isLoggedIn;
    
        let button = null;
        if (isLoggedIn) {
          button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
          button = <LoginButton onClick={this.handleLoginClick} />;
        }
    
        return (
          <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <LoginControl />,
      document.getElementById('root')
    );

    3)直接调用函数

        class HelloWorld extends React.Component{
            constructor(props){
                super(props);
                this.getName=this.getName.bind(this);
            }
            getName(){
                if(this.props.name){
                    return this.props.name;
                }else{
                    return "World";
                }
            }
            render(){
                return <p>Hello {this.getName()}</p>
            }
        });
      React.render(<HelloWorld/>,document.body);

    4)使用逻辑运算符

    class HelloWorld extends React.Component{
            render(){
                return <p>Hello {this.props.name||"World"}</p>
            }
    }
    React.render(<HelloWorld/>,document.body);
    function Mailbox(props) {
      const unreadMessages = props.unreadMessages;
      return (
        <div>
          <h1>Hello!</h1>
          {unreadMessages.length > 0 &&
            <h2>
              You have {unreadMessages.length} unread messages.
            </h2>
          }
        </div>
      );
    }
    
    const messages = ['React', 'Re: React', 'Re:Re: React'];
    ReactDOM.render(
      <Mailbox unreadMessages={messages} />,
      document.getElementById('root')
    );

    1.4 万能的函数表达式

    <script>
        class HelloWorld extends React.Component{
            render(){
                return <p>Hello {
                    (function(obj){
                        if(obj.props.name){
                            return obj.props.name;
                        }else{
                            return "World";
                        }
                     }(this))
                }</p>
            }
         }
    </script>

    利用即时执行函数,即时执行函数有两种形式:

    • 示例中的括号在外面的形式,这种返回的直接是函数运行后的值
    • 括号在里面的形式,运行后先拿到了函数的引用,然后传入参数(this)运行函数得到返回值。
    (function(obj){
         if(obj.props.name){
             return obj.props.name;
         }else{
             return "World";
         }
    })(this)

     

    1.5 JSX的false处理

    被渲染成 id="false",id值为字符串false:

    ReactDOM.render(<div id={false} />, mountNode);

    input value 的值将会是 "false" 字符串

    ReactDOM.render(<input value={false} />, mountNode);

    没有子节点

    ReactDOM.render(<div>{false}</div>, mountNode);

    上面这个没有被渲染成 "false" 字符串是因为要考虑到这种常见的情况:<div>{x > 1 && 'You have more than one item'}</div>.

  • 相关阅读:
    sql命令附加数据库
    数据解析0102
    xml file parser
    c#字定义异常处理类
    simple workflow implement
    High Performance Multithreaded Work Item / Event Scheduling Engine
    字符定位
    C#实现的不重复随机数序列生成算法
    Thread并发数控制
    通过Assembly来创建Type Instance
  • 原文地址:https://www.cnblogs.com/YangqinCao/p/6032625.html
Copyright © 2011-2022 走看看