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