这篇文章将为大家详细讲解有关如何解决React中组件通信问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联建站长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为张店企业提供专业的成都网站设计、网站建设，张店网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
父子组件
父 → 子
parent组件传给child组件，符合react的单向数据流理念，自上到下传递props。
// 父组件
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
this.setState({
value: this.value,
})
}
render() {
return (
我是parent
通知
// 子组件
class Child extends Component {
render() {
const { value } = this.props;
return (
我是Child，得到传下来的值：{value}
);
}
}父组件做的就是定义好 state ，定义好事件函数，input onChange 的时候，去缓存 value 值，然后点击 button 的时候，改变 state , 子组件只负责展示 value 。
子 → 父
child 组件通知 parent 组件， 主要是依靠 parent 传下来的 callback 函数执行，改变 parent 组件的状态，或者把 child 自己的 state 通知 parent 。分两种情况：
state 定义在 parent 组件
// parent
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
我是parent, Value是：{this.state.value}
class Child extends Component {
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
我是Child
state 定义在 parent
通知
parent 组件把改变 state 的 setValue 函数传给 child ，child 组件自己处理内部的状态（这里是表单的value值），当 child 组件分发消息的时候， 执行 parent 的 setValue 函数，从而改变了 parent 的 state，state发生变化， parent 组件执行 re-render 。
state 定义在 child 组件
// parent
class Parent extends Component {
onChange = value => {
console.log(value, '来自 child 的 value 变化');
}
render() {
return (
我是parent
class Child extends Component {
constructor() {
super();
this.state = {
childValue: ''
}
}
childValChange = e => {
this.childVal = e.target.value;
}
childValDispatch = () => {
const { onChange } = this.props;
this.setState({
childValue: this.childVal,
}, () => { onChange(this.state.childValue) })
}
render() {
return (
我是Child
state 定义在 child
通知
);
}
}有时候 state 是需要定义在 child 组件的，比如弹窗， CheckBox 这种开关性质的，逻辑是重复的，state 定义在组件内部更好维护， 复用性更好。但是 child 的 state 是需要告知我的 parent 组件的， 同样还是执行 parent 传下来的 change 函数。
兄弟组件
有时候可能出现页面中的某两部分通信，比如省市的级联选择，点击 button 改变颜色等等，组件并不是父子级，没有嵌套关系的时候。这种时候通常是依赖共有的顶级 Container 处理或者第三方的状态管理器。其实原理都是相通的，兄弟 A 的 value 发生变化，分发的时候把 value 值告诉一个中间者 C ，C 会自动告知 B，实现 B 的自动render 。
利用共有的Container
// container
class Container extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
// 兄弟A
class A extends Component {
handleChange = (e) => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
我是Brother A, 通知
)
}
}