父子组件传值(react 父子组件通信):
父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。
父组件主动获取子组件的数据
1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>
2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )
子组件主动获取父组件的数据
1、在调用子组件的时候定义一个属性 <Header title={this.state.title} run={this.run} news={this} />
2、在父组件定义方法
//获取子组件里面穿过来的数据 getChildData=(result)=>{ alert(result); this.setState({ msg:result }) }
2、子组件按钮点击传值
<button onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')}>子组件给父组件传值</button>
本文作者为gengboxb,转载请注明。