React组件通信

父组件传递数据给子组件

1. 父组件提供要传递的state数据
2. 给子组件标签添加属性，值为state中的数据
3. 子组件中通过props接收父组件中传递的数据

class App extends React.Component {
//父组件提供要传给子组件的数据放在state中
  state = {
    lastName: '老王'
  }

  render() {
    return (
        <div className="parent">
          父组件
          <Child name={this.state.lastName} />//在子组件标签中添加属性
        </div>
    )
  }
}

function Child(props) {
  return (
      <div className="child">
        <h1>子组件：{props.name}</h1>//子组件中利用props接收数据
      </div>
  )
}

ReactDom.render(<App />, document.getElementById('root'));

子组件传递数据给父组件

1. 父组件提供回调函数，参数就是子组件传递过来的数据。
2. 在子组件标签中，将该回调函数作为参数传递给子组件。
3. 在子组件中调用父组件传递过来的回调函数，将数据作为参数传递进去。

class App extends React.Component {
  state = {
    lastName: '老王',
    childData: ''
  }
  getChildMsg = data => {//定义回调函数
    console.log(data)
    this.setState({
      childData: data
    })
  }
  render() {
    return (
        <div className="parent">
          <h3>父组件接收到的数据：{this.state.childData}</h3>
          <Child getMsg={this.getChildMsg}/>//传递回调函数
        </div>
    )
  }
}
class Child extends React.Component {
  state = {
    name:'child'
  }
  handleClick = e => {
    //调用回调函数，并将待传数据作为参数
    this.props.getMsg(this.state.name);
  }
  render() {
    return (
        <div>
          子组件: <button onClick={this.handleClick}>传递数据给父组件</button>
        </div>
    )
  }
}

兄弟组件通讯

1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态。
2. 要通讯的子组件只需通过props接收状态或操作状态的方法。

组件A，用于提供数据，是兄弟组件其中之一：

import React from 'react';
class Acom extends React.Component {
    //按钮点击事件，向父组件传值
    handleClick(){
        this.props.data("hello...React...");
    }
    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>A组件中获取数据</button>
        );
    }
}
export default A;

父组件用于中转数据：

import React from 'react';
import A from './A';
import B from './B';
class P extends React.Component {
    constructor(){
        super();
        this.state = {
            mess: ''
        }
    }
    getDatas(data){//向子组件A提供的传值方法，参数为获取的子组件传过来的值
        this.setState({
            mess: data
        });
    }
    render(){
        return (
                <A data={this.getDatas.bind(this)}></A>
                <B mess={this.state.mess}></B>
        );
    }
}
 
export default P;

创建子组件 B 用于展示从 A组件中生成的数据：

import React from 'react';
class B extends React.Component {
    render(){
        return (
            <div>在B组件中展示数据：{this.props.mess}</div>
        );
    }
}
export default B;

Context跨组件传递数据

1. 调用React. createContext () 创建 Provider(提供数据）和Consumer (消费数据）两个组件。
2. 使用Provider组件作为父节点去包裹要传递数据的节点，在Provider组件上设置value属性，表示要传递的数据。
3. 使用Consumer组件接收数据。

首先，先创建一个context.js文件（与父子孙同个目录），默认值为一个对象。

import React from "react";
const MyContext = React.createContext({text:'luck'});
export default MyContext;

然后改写父组件，引入context，使用provider传递value。

import React from 'react';
import Children from './Children';
import MyContext from './context';
class Parent extends React.Component {
  constructor(props) {
	super(props);
  }
  // 使用 Provider 将当前的 value 传递给下级组件树。无论多深，任何组件都能读取这个值。
  render(){
    return (
      <div>
        <p>context通信实例</p>
        <MyContext.Provider value={{text:'good luck'}}>
          <Children></Children>
        </MyContext.Provider>
      </div>
    )
  }
}
export default Parent；

子组件作为中间层，不做处理，用于包裹孙组件。

import React from 'react';
import Grandson from './Grandson';
class Children extends React.Component {
  render(){
    return (
      <div>
        <Grandson></Grandson>
      </div>
    )
  }
}
export default Children;

最后孙组件，同样需引入context，通过this.context直接获取到上层距离最近的Provider传递的值，此时this.context = {text:good luck}，即父组件传递value。

import React from 'react';
import MyContext from './context';
class Grandson extends React.Component {
  static contextType = MyContext//添加用于表示孙子组件使用context
  render(){
    return (
      <div>
        <p>通过context传过来：</p>
        <span>{this.context.text}</span>
      </div>
    )
  }
}
 
export default Grandson;