react父子组件间的交流
来源:互联网 发布:php计算器代码 编辑:程序博客网 时间:2024/05/19 16:32
本博客主要讲述,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~
欢迎指正。
~
~
有不明白的也可以留言,联系方式在个人资料处。
- react父子组件间的交流
- React中父子组件间的通信问题
- react(二)父子组件间的数据传递---prop
- react 父子组件通讯
- React 组件基本使用(三) ---父子组件之间的通信
- react父子组件传值
- react 父子组件之间的通信和函数调用
- # react中父子组件之间的通讯,一看就懂
- react入坑之父子组件之间的传值
- React 组件之间如何交流
- React 组件之间如何交流
- React 组件之间如何交流
- react组件之间如何交流
- React 组件之间如何交流
- React 组件之间如何交流
- 【react】父子组件之间通讯props
- react状态提升 父子组件交互
- VUE 父子组件间的通讯
- Java多线程
- js 获取select的值 / js动态给select赋值
- PMP学习笔记(五)
- redis学习记录
- python时间time模块介绍
- react父子组件间的交流
- 数素数--素数表的获取
- Android开发——Protocol Buffer的使用(比XML、Json快很多)
- 安卓基础-get post请求与提交数据
- MySQL新建用户,及设定访问权限
- linux添加用户、权限
- Mac中Jenkins自动打包上传fir的配置流程(从零开始)二
- 写个python脚本下载并解压 MNIST 数据集(1)
- hdu5787 数位DP