React学习笔记——组件间通信组件通信

适用于刚开始接触react直接上手的同学，建议还是打好JS和ES6基础。
基础父传子
子传父
兄弟组件传递
进阶（待完成）不太相关组件之间传递
redux
ref
context
observer pattern
全局变量
基础内容（1）父传子：可以通过props将父组件数据传给子组件
function Parent(){
return (

)
}
function Child(props){
return
}
ReactDOM.render(, document.getElementById("root"));
如上所示，
上面这段的props为{name:"child"}如果不太明白props的话可以看下面这段。
、
（2）子传父：可以通过继承父组件的函数来改变父组件的状态。（回调函数,事件）
也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。
有两种传递方式：
方法一：直接调用父组件的方法
方法二：先调用自身的方法，再调用父组件的方法

class Parent1 extends React.Component{ constructor(props){ super(props); this.state ={ msg:'父类消息', } }onButtonClick = (msg) => { this.setState({msg: '子类信息'}) } render(){ return ( 子传给我的信息:{this.state.msg} {/*方法一调用方式*/} {/*方法二调用方式 */} ) } } // 方法一：直接调用父组件的方法 function Child1(props){ return }//方法二：先调用自身的方法，再调用父组件的方法 function Child2(props){ childClickHandle = (msg) =>{ this.props.onButtonClick(msg); //这个onButtonClick对应中第一个onButtonClick } return }ReactDOM.render(, document.getElementById("root"));

文章图片

（3）兄弟组件传值（子传给父，父再传给另一个子),一般来说，两个非父子组件想要通信，首先我们可以看看它们是否是兄弟组件，即它们是否在同一个父组件下。如果不是的话，考虑下用一个组件把它们包裹起来从而变成兄弟组件是否合适。这样一来，它们就可以通过父组件作为中间层来实现数据互通了。

class Parent extends React.Component { constructor(props) { super(props) this.state = {count: 0} } setCount = () => { this.setState({count: this.state.count + 1}) } render() { return (); } }const SiblingA = (props) => { return }const SiblingB = (props) => { return }ReactDOM.render(【React学习笔记——组件间通信】, document.getElementById('root') );

进阶内容