JSX 是什么? 有哪些需要注意

JSX實際上是語法糖, 用xml標簽寫Javascript代碼, 看上去結構更加清晰
一般來說,在項目上線前要把jsx代碼轉換成純js代碼,gulp-react 或 react-tools

JSX 需要注意關鍵詞
由于class和for這兩個html標簽里的屬性與Javascript關鍵詞沖突, 所以需要用className和htmlFor代替

JSX 會丟棄非標準屬性,所以自定義屬性需要添加 data- 前綴

<div data-custom-attribute="foo" />

JSX 命名空間

一個組件有多個子組件，你希望這些子組件可以作為其父組件的屬性，那么可以像這樣用：

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

這樣你只需將子組件的ReactClass作為其父組件的屬性：

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

創建子元素可以直接交給JSX轉化器：

var App = (
    React.createElement(Form, null,
        React.createElement(Form.Row, null,
            React.createElement(Form.Label, null),
            React.createElement(Form.Input, null)
        )
    )
);

JSX 不能使用if條件語句,會出現語法錯誤,可以使用三目運算符

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Error: Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
// 可以從轉化后的Javascript代碼中看出明顯的語法錯誤，所以要不用三目運算符，要不就這樣寫：
if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

JSX 使用...運算符

var props = { foo: x, bar: y };
var component = <Component { ...props } />;
// 這樣就相當于：
var component = <Component foo={x} bar={y} />

// 它也可以和普通的XML屬性混合使用，需要同名屬性，后者將覆蓋前者：
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'