React 只關(guān)心兩件事： 更新DOM绪商，相應(yīng)事件
在 React 中，對 DOM 只更新，不讀取
React 在整個應(yīng)用中只使用單個事件處理器碉克，并且會把所有的事件委托到這個處理器上
屬性可以是 JS 變量，也可以是函數(shù)
let surveyId = this.props.id;
let classes = 'some-class-name';
<div id={surveyId} className={classses}></div>
<div id={this.getSurveyId()}></div>
直接在 JSX 中加入 if 語句是無效的
<div className={if(isComplete){'is-complete'}}></div>
解決上面問題的方案：
使用三目運算符
設(shè)置一個變量并在屬性中引用它
將邏輯轉(zhuǎn)化到函數(shù)中
使用 && 運算符
- 使用三目運算符
render: function(){
return <div className={
this.state.isComplete ? 'is-complete' : ''
}></div>
}
- 使用變量
getIsComplete: function(){
return this.state.isComplete ? 'is-complete' : '';
}
render: function(){
var isComplete = this.getIsComplete();
return <div className={isComplete}></div>
} - 使用函數(shù)
getIsComplete: function(){
return this.state.isComplete ? 'is-complete' : '';
}
render: function(){
return <div className={this.getIsComplete()}></div>;
} - 使用 &&
render: function(){
return <div className={this.state.isComplete && 'is-complete'}></div>;
}
引用 ref
render: function(){
return <div> <input type='myInput' /> </div>;
}
然后并齐，就可以在組件中的任何地方使用 this.refs.myInput 獲取這個引用
(這里不是真正的DOM節(jié)點)
可以使用 this.refs.myInput.getDOMNode() 訪問真是的 DOM 節(jié)點
Style
var styles = {
borderColor: '#999',
borderThickness: '1px'
};
React.renderComponent(
<div style={styles}></div>,
node
);
componentDidMount
可以在 componentDidMount 內(nèi)部通過 this.getDOMNode() 方法訪問到被渲染真實DOM元素
