react父子组件传值

1.父组件调用子组件的方法与数据:
父组件引入子组件Footer
在子组件加ref属性

父组件执行getFooter方法,调用子组件的run()方法 getFooter=()=>{ this.refs.footer.run(); alert(this.refs.footer.state.msg); //获取子组件的数据 } 2.父组件跟子组件传值 父组件加news属性

子组件在state里面接受然后页面

{this.state.news}

显示出来 constructor(props){ super(props); this.state={ news:props.news } } 没传值的时候 Header.defaultProps={ title:'header默认标题' } 3.子组件调用父组件的所有方法: 父组件在 标签上添加news属性 挂载this给子组件

子组件通过news可以执行父组件news的getData方法 在元素里执行 onClick={this.props.news.getData} 在方法执行 this.props.news.getData(); 执行单个方法 父

子onClick={this.props.run} 4.子组件跟父组件传值 子组件通过bind传值 onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')} 父组件getChildData方法接一下result就是数据然后可以 在state里面进行赋值 ``` getChildData=(result)=>{ alert(result);

this.setState({
msg:result
})
}