react父子组件间的交流

前言

本博客主要讲述，react中父组件和子组件之间的交流，其中包括父组件和子组件的值的交流和函数方法的交流，即父组件如何如何传值给子组件，父组件将方法传给子组件，父组件如何调用子组件的方法。
本博客主要总结性的讲述了再react中组件的交流方式，举出具体代码的可参考【React组件之间传值】。

统一说明：<ChildrenComponents /> 代表引入的子组件

（一）父组件通过state传值给子组件，子组件通过props获取父组件的传递值

//(一)传值，即在父组件中声明好自己的state，然后传值，如下
//1.初始值
constructor() {super();this.state = {stateValue：true}}
//2.如有改变设定值
this.setState({ stateValue: false })
//3.在父组件中传值
<ChildrenComponents stateValue={this.state.stateValue} stateValue2="react value" />//（二）取值，即在需要的地方取到通过props取父组件传过来的值
//如在componentDidMount中取值
componentDidMount（） {const huoquValue = this.props.stateValue;if ( !this.props.stateValue ) {//通过props来接收传递过来的变量console.log('stateValue', this.props.stateValue, this.props.stateValue2)}
}

值得注意一点的是，setState 是一个异步方法，需要render值行的时候才会触发。可以参考我的博客【 React的setState立即执行方案】。

（二）父组件将function函数方法传给子组件，子组件通过props来获取。

//父组件文件中：
class TestHtml extends React.Component {//1.函数方法的声明propsFunction() { console.log('声明在父组件的方法') }render() {return (<div><span><span>//2.传递<ChildrenComponents propsFunction={::this.propsFunction} /></div>)}
}
function mapStateToProps(state, ownProps) {return {}
}function mapDispatchToProps(dispatch) {return {...bindActionCreators(action, dispatch)}
}export default connect(mapStateToProps, mapDispatchToProps)(TestHtml)子组件中获取
//也直接通过 props 来获取传递过来的函数
<Button onClick={this.props.propsFunction} />

说明：写这一段的时候，突发奇想，竟然就把react-redux的页面结构的写出来了。好吧，等下写完这篇，如果有必要就具体写一下这个页面的结构类型吧。

（三）在父组件中调用子组件中的function函数方法。

//注：新的react不能通过是给子组件一个ref，然后父组件通过refs获取到子组件接口的！// 父组件
export default class Parent extends Component {render() {return(<div>{/* 1.通过onRef接收子组件的函数 */}<ChildrenComponents onRef={::this.onRef} /><button onClick={::this.click} >click</button></div>)}onRef(ref) {// 2. 把子组件中的函数赋值到 child 变量中this.child = ref}click() { //调用子组件函数// 4.通过 child 变量调用需要的函数this.child.myChild()}}//子组件
class ChildrenComponents extends Component {componentDidMount(){// 3. 将子组件中的所有函数变量传递到父组件的onRef函数中，此处必须声明this.props.onRef(this)}myChild() { alert('This is child Action') }render() {return ('Child Render Text')}
}

（四）特殊情况

当你发现这些方法都不起作用的时候，或者说，因为某些限制而不能用的时候，你就换一下思路了。
其实我们还可以通过action–reduce的方式在他们的外部且是公共的action-reduce中搞定。
其中涉及到方法我们就直接新建一个方法，在action中声明，在reduce中实现。如果只是某个值，用不到函数的，我们可以直接在reduce里面设定，且赋值，最后通过mapStateToProps获取。
关于mapStateToProps，可以直接参考【React依赖注入说明（mapStateToProps/mapDispatchToProps）】

总结

1.父组件通过state向子组件传值，子组件通过props获取父组件所传的值。
2.子组件通过props获取父组件中定义的函数方法，但是需要在父组件调用子组件的标签中写明。
3.父组件调用子组件中函数需要定义一个function函数来转接，而不能通过ref/refs的方式
4.组件之间的交流也不一定要沉在这些直接性的关联的东西，我们的思维还可以提升一个高度，可以考虑通过action-reduce来搞定。
end~
欢迎指正。
~

~
有不明白的也可以留言，联系方式在个人资料处。