React Js如何处理子组件中的props

Question

我是React Js的新手我很困惑我可以在它渲染到子组件之前获取道具来操纵它。谁能帮助我如何运作？

Answer 1

我找到了一个了解React Js生命周期的好例子。

Click me查看示例并了解其工作原理。

var App = React.createClass({
getInitialState: function () {
    console.log('getInitialState');
    return {
        disabled: false
    }
},

getDefaultProps: function () {
    console.log('getDefaultProps');
    return {
        message: 'Hello World'
    };
},

componentWillUnmount: function () {
    console.log('componentWillUnmount');
},

componentWillMount: function () {
    console.log('componentWillMount');
},

componentDidMount: function () {
    console.log('componentDidMount');
},

componentWillReceiveProps: function () {
    console.log('componentWillReceiveProps');
},

shouldComponentUpdate: function () {
    console.log('shouldComponentUpdate');
    return true;
},

componentWillUpdate: function () {
    console.log('componentWillUpdate');
   },

    componentDidUpdate: function () {
        console.log('componentDidUpdate');
    },

handleMessageChange: function () {
    console.log('handleMessageChange');
    this.setProps({
        message: this.refs.message.getDOMNode().value
    });
},

handleDisabledChange: function () {
    console.log('handleDisabledChange');
    this.setState({
        disabled: this.refs.disabled.getDOMNode().checked
    });
},

    render: function () {
        console.log('render');
        return (
           <div className="container">
                <input ref="message"
                       type="text"
                       value={this.props.message}
                       disabled={this.state.disabled}
                       onChange={this.handleMessageChange}/>    
                <input ref="disabled"
                       type="checkbox"
                       checked={this.state.disabled}
                       onChange={this.handleDisabledChange}/>
               <div className="mirror">{this.props.message}</div>
           </div>
      );
   }
 });

React.renderComponent（，document.body）;

感谢。