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({ ... });
創(chuàng)建子元素可以直接交給JSX轉化器：
var App = (
React.createElement(Form, null,
React.createElement(Form.Row, null,
React.createElement(Form.Label, null),
React.createElement(Form.Input, null)
)
)
);
JSX 不能使用if條件語句,會出現(xiàn)語法錯誤,可以使用三目運算符
// 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'
