来补充一下上面那位同学所说的。很多情况下，子控件需要父控件所有的 props 参数，这个时候我们一个一个参数的写会很麻烦，比如：

<Name name={this.props.name} url={this.props.url}  .../>

那么我们怎么样吧父属性直接赋值给子组件的props参数呢？如下写法即可：

<Name props={this.props}/>

这样写就非常简洁了，也就子控件和父控件都有了同样数据结构的 props 参数。

很多情况下我们调试页面时，看到的参数名在父控件和子控件中部一样，但是表示的值是同一个，写这段代码的人可能还记得这个参数是转译的，但是其他人阅读时就会摸不着头脑，在效率上是处于弱势的，所以我们一般建议引用父组件参数尽量保持名称不变，以便以后维护。

借助楼上的代码，做了个改良，下面的父子模块互相传递参数。

class CptBody extends React.Component{
    constructor(){
        super();
        this.state = {username : 1}; //可以传json等很多格式（这个是初始化赋值）
    }
    //click事件函数
    changeAge(){
        this.setState({username:1+this.state.username})
    }
    //change事件函数
    changeUsername(event){
        this.setState({username:parseInt(event.target.value)})
    }
    render(){
       return(
            <div>
                <h1>下面的操作有惊喜</h1>
                <p>{this.state.username}</p>
                <input type="button" value="点击改变username" onClick={()=>this.changeAge()}/>
                <BodyChild changeUsername={this.changeUsername.bind(this)} getname={this.state.username}/>
            </div>
        )
    }
}


class BodyChild extends React.Component{
    render(){
        return(
            <div>
                <p>子页面输入：<input type='text' value={this.props.getname} onChange={this.props.changeUsername} /></p>

            </div>
        )
    }
}
ReactDOM.render(
    <CptBody  />,
    document.getElementById('example')
);

尝试一下 »

BodyChild 组件的 render 函数返回值 jsx 中 <p> 的 value 是从父组件获取的 getname 这个变量值，onChange 获取的是 changeUsername 这个函数，所以如果文本框中的值改变了，改变值这个事件会触发 changeUsername 这个函数，这个函数会获得事件的值，即我们文本框修改后的值，并将其赋值给父组件的 state.username 这个变量。而父组件的这个变量改变后，state 随之改变，这时候，render 会重新启动，所以我们会看到修改后的值。

父组件的 jsx 中有一个箭头函数，有一个 bind 函数，这两者有什么区别吗？经验证，这两者是可以互换的。

onClick={this.changeAge.bind(this)} 和 onClick={()=>this.changeAge()} 可以互换。