React 只关心两件事： 更新DOM，相应事件
在 React 中，对 DOM 只更新，不读取
React 在整个应用中只使用单个事件处理器，并且会把所有的事件委托到这个处理器上
属性可以是 JS 变量，也可以是函数
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>
解决上面问题的方案：
使用三目运算符
设置一个变量并在属性中引用它
将逻辑转化到函数中
使用 && 运算符
- 使用三目运算符
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>
} - 使用函数
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节点)
可以使用 this.refs.myInput.getDOMNode() 访问真是的 DOM 节点
Style
var styles = {
borderColor: '#999',
borderThickness: '1px'
};
React.renderComponent(
<div style={styles}></div>,
node
);
componentDidMount
可以在 componentDidMount 内部通过 this.getDOMNode() 方法访问到被渲染真实DOM元素
