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"));

image.png

(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( , document.getElementById('root') );

进阶内容

你可能感兴趣的