本博客主要讲述,react中父组件和子组件之间的交流,其中包括父组件和子组件的值的交流和函数方法的交流,即父组件如何如何传值给子组件,父组件将方法传给子组件,父组件如何调用子组件的方法。
本博客主要总结性的讲述了再react中组件的交流方式,举出具体代码的可参考【React组件之间传值】。
统一说明
1、<FuZujian />代表父组件,
2、<ZiZujian />代表子组件
(一)父组件通过state传值给子组件,子组件通过props获取父组件的传递值
//(一)传值,即在父组件中声明好自己的state,然后传值,如下
//1.初始值
constructor() {
super();
this.state = {
stateValue:true
}
}
//2.如有改变设定值
this.setState({
stateValue: false
})
//3.在父组件中传值
<ZiZujian stateValue={this.state.stateValue}
//(二)取值,即在需要的地方取到通过props取父组件传过来的值
//如在componentDidMount中取值
componentDidMount() {
const huoquValue = this.props.stateValue;
if ( !this.props.stateValue ) {
console.log('stateValue', this,.props.stateValue)
}
}
值得注意一点的是,setState 是一个异步方法,需要render值行的时候才会触发。可以参考我的博客【 React的setState立即执行方案】。
(二)父组件将方法传给子组件,子组件通过props来获取。
//父组件文件中:
class TestHtml extends React.Component {
//1.方法的声明
propsFunction() {
console.log('声明在父组件的方法')
}
render() {
return (
<div>
<span><span>
//2.传递
<ZiZujian propsFunction={::this.propsFunction} />
</div>
)
}
}
function mapStateToProps(state, ownProps) {
return {
}
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators(action, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TestHtml)
子组件中获取
<Button onClick={this.props.propsFunction} />
说明:写这一段的时候,突发奇想,竟然就把react-redux的页面结构的写出来了。好吧,等下写完这篇,如果有必要就具体写一下这个页面的结构类型吧。
(三)在父组件中调用子组件中的方法,通过ref和refs实现。
//这里就简要说明一下
//思路是给子组件一个ref,然后父组件通过refs获取
componentWillReceiveProps(nextProps) {
this.refs.jiedian.子组件的方法名()
//举个例子
// this.refs.getSwordButton.setFieldsValue({
// xmlUrl: nextProps.sysCode==null ? nextProps.accountInfo.xmlUrl : nextProps.sysCode
// })
<ZiZujian ref="jiedian" />
}
(四)特殊情况
当你发现这些方法都不起作用的时候,或者说,因为某些限制而不能用的时候,你就换一下思路了。
其实我们还可以通过action–reduce的方式在他们的外部且是公共的action-reduce中搞定。
其中涉及到方法我们就直接新建一个方法,在action中声明,在reduce中实现。如果只是某个值,用不到函数的,我们可以直接在reduce里面设定,且赋值,最后通过mapStateToProps获取。
关于mapStateToProps,可以直接参考【React依赖注入说明(mapStateToProps/mapDispatchToProps)】
总结
1.父组件通过state向子组件传值,子组件通过props获取父组件所传的值。
2.子组件通过prop获取父组件中定义的函数方法,但是需要在父组件调用子组件的标签中写明。
3.父组件通过refs调用子组件中声明的方法,但是需要给子组件添加一个ref节点
4.组件之间的交流也不一定要沉在这些直接性的关联的东西,我们的思维还可以提神一个高度,可以在action-reduce中搞定。
end~