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>.