例子3.如果还存在孙子组件的情况呢？如下图，黑框为父，绿框为子，红框为孙，要求子孙的数据都传给爷爷。原理一样的，只是父要将爷爷对孙子的处理函数直接传下去。
//孙子，将下拉选项的值传给爷爷 var Grandson = React.createClass({ render: function(){ return ( <div>性别： <select onChange={this.props.handleSelect}> <option value="男">男</option> <option value="女">女</option> </select> </div> ) } }); //子，将用户输入的姓名传给爹 //对于孙子的处理函数，父只需用props传下去即可 var Child = React.createClass({ render: function(){ return ( <div> 姓名：<input onChange={this.props.handleVal}/> <Grandson handleSelect={this.props.handleSelect}/> </div> ) } }); //父组件，准备了两个state，username和sex用来接收子孙传过来的值，对应两个函数handleVal和handleSelect var Parent = React.createClass({ getInitialState: function(){ return { username: '', sex: '' } }, handleVal: function(event){ this.setState({username: event.target.value}); }, handleSelect: function(event) { this.setState({sex: event.target.value}); }, render: function(){ return ( <div> <div>用户姓名：{this.state.username}</div> <div>用户性别：{this.state.sex}</div> <Child handleVal={this.handleVal.bind(this)} handleSelect={this.handleSelect.bind(this)}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') );
getDefaultProps && getInitialStategetDefaultProps方法可以用来设置组件属性的默认值
var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle />, document.body );
getInitialState 方法可以用来设置初始状态
getInitialState: function() { return {liked: false}; },
获取真实的DOM节点从组件获取真实 DOM 的节点，这时就要用到ref属性
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example') );
上面代码中，组件MyComponent的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后this.refs.[refName]就会返回这个真实的 DOM 节点。
需要注意的是，由于this.refs.[refName]属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实 DOM 发生Click事件之后，才会读取this.refs.[refName]属性。
React 组件支持很多事件，除了Click事件以外，还有KeyDown、Copy、Scroll等，完整的事件清单请查看官方文档。
子组件传向父组件的另一种思路
父组件调用子组件的state、function，除了上面介绍的方法之外，也可以通过ref属性实现。推荐使用这种方式进行子组件向父组件的传递。举个简单的示范：
export default class 父组件a extends React.Component { constructor(props) { super(props) } render() { return ( <子组件b ref={r => this.bbbb =r} // bbbb自定义名字 /> ) } }
经过这样处理后后，现在父组件a中可以通过this.bbbb.state.xxx获取子组件的xxx状态，也可以通过this.bbbb.xxx获取子组件的xxx方法。