建站
咨询
售后
建站咨询
这篇文章主要介绍React如何实现父子组件通信，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都做网站、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的玛曲网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
父子组件通信
原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。
首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。
Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传props。
import React from 'react';
import { Button } from 'element-react';
import Children from './Children';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:'父组件传递给子组件'
};
this.changeMsg = this.changeMsg.bind(this)
}
changeMsg(){
this.setState({
msg:'父组件传递给子组件（改变之后的内容）'
})
}
render(){
return (
父子组件通信实例
父传子
Children.js子组件如下，初始状态通过props拿到父组件传过来的值。
import React from 'react';
class Children extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:this.props.toChildren //通过props拿到父组件传过来的值
};
}
render(){
return (
从父组件传过来：
{this.state.msg}
注意：子组件取值时应与父组件放在子组件的字段props一致，即本例中的 toChildren，如下
那么子组件想向父组件传值（向上传值），可以通过调用父组件传过来的回调函数
在Parent.js中向Children.js中加入回调函数callback，绑定changeMsg方法
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:'父组件传递给子组件',
fromChildrn:''
};
this.changeMsg = this.changeMsg.bind(this)
}
changeMsg(val){
this.setState({
fromChildrn: val
})
}
render(){
return (
父子组件通信实例
{this.state.fromChildrn}
在子组件中，用this.props.callback()执行父组件的回调函数，从而执行绑定方法changeMsg，显示子组件传过来的值
import React from 'react';
import { Button } from 'element-react';
class Children extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:this.props.toChildren
};
this.toParent = this.toParent.bind(this)
}
toParent(){
this.props.callback('子组件传过来的值') //子组件通过此触发父组件的回调方法
}
render(){
return (
从父组件传过来：
{this.state.msg}
子传父
注意：props中的回调函数名称需一致，即本例中的callback，如下
以上是“React如何实现父子组件通信”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
文章标题：React如何实现父子组件通信
网页地址：http://scgulin.cn/article/pdiooo.html
