react-2-组件通信

1. 父传子

父组件在使用子组件的时候，在子组件上添加自定义属性，然后将属性值传递给子组件，子组件使用props接收。

父组件

import React, { Component } from "react";

// 引入子组件
import Son from "./demo/Son";

export default class App extends Component {
  state = {
    uname: "这是父组件的信息",
  };
  render() {
    return (
      <div>
        <Son info={this.state.uname} />
      </div>
    );
  }
}

子组件

import React, { Component } from "react";

export default class Son extends Component {
  render() {
    return (
      <div>
        Son
        <h2>{this.props.info}</h2>
      </div>
    );
  }
}

图式

2. 子传父

子传父就是父组件在使用子组件的时候，将一个函数传递给子组件，子组件触发该函数，修改父组件中的值。

父组件代码

import React, { Component } from "react";

import Son from "./demo/Son";
export default class App extends Component {
  state = {
    info: "这个是父组件的的info",
  };
  render() {
    return (
      <div>
        <p>{this.state.info}</p>
        <Son
          callback={(msg) => {
            this.getMsg(msg);
          }}
        />
      </div>
    );
  }

  getMsg = (msg) => {
    this.setState({ info: msg });
  };
}

子组件代码

import React, { Component } from "react";

export default class Son extends Component {
  state = {
    msg: "子组件的信息",
  };
  render() {
    // 将传递过来的函数输出看一下
    console.log(this.props.callback);
    return (
      <div>
        Son
        <button
          onClick={() => {
            this.props.callback(this.state.msg);
          }}
        >
          change
        </button>
      </div>
    );
  }
}

图式

3. 兄弟组件通信

兄弟组件之间传递数据，可以将Son组件的数据传递给自己的父组件，父组件将数据传递给Son2组件。备注：父组件是 son 和 son2 的父亲。

父组件代码

import React, { Component } from "react";
import Son from "./demo/Son";
import Son2 from "./demo/Son2";
export default class App extends Component {
  state = {
    msg: "",
  };
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        <Son
          // 将箭头函数传递给子组件
          callback={(msg) => {
            this.getMsg(msg);
          }}
        />
        <Son2 msg={this.state.msg} />
      </div>
    );
  }

  getMsg = (msg) => {
    // 获取到子组件传递过来的信息，然后设置给状态
    this.setState({
      msg,
    });
  };
}

子组件Son代码

import React, { Component } from "react";

export default class Son extends Component {
  state = {
    info: "我是子组件的信息",
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            // 父组件接收子组件传过来的箭头函数，然后传参并且执行该函数
            this.props.callback(this.state.info);
            // 上面这个函数执行之后，会触发父组件中的 this.getMsg(msg) 这个函数
          }}
        >
          子组件的按钮
        </button>
      </div>
    );
  }
}

子组件Son2代码

import React, { Component } from "react";

export default class Son2 extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.msg}</h2>
      </div>
    );
  }
}

4. 提供者与消费者

提供者与消费者可以用来实现组件的跨级通信，提供者 provider 提供数据，消费者 consumer 使用数据。需要注意的是 provider 有一个固定的属性 value ，consumer 需要使用函数然后返回jsx的形式，这样设计便于传参。

提供者

import React, { Component } from "react";

import Son from "./demo/Son";

// 创建一个 context 对象
export const { Provider, Consumer } = React.createContext();

export default class App extends Component {
  state = {
    info: "父组件的信息",
  };
  render() {
    return (
      <Provider
          // value 是固定的写法
        value={{
          uname: "这里是父组件传递给子组件的",
          info: this.state.info,
          changInfo: (info1) => {
            this.setState({ info: info1 });
          },
        }}
      >
        <div>父组件</div>
        <Son />
      </Provider>
    );
  }
}

消费者

import React, { Component } from "react";

// 这里引入的消费者 对象 必须是和 提供者配对的
import { Consumer } from "../App";

export default class Son extends Component {
  render() {
    return (
      <Consumer>
            // 这里的value 就是提供者的那个value里面的值
        {(value) => (
          <div>
            子组件 {value.uname}---{value.info}
            <button
              onClick={() => {
                value.changInfo("12312314323454");
              }}
            >
              change
            </button>
          </div>
        )}
      </Consumer>
    );
  }
}

5. refs

父组件代码

import React, { Component } from "react";

import Son from "./demo/Son";

export default class App extends Component {
    
  myrefH2 = React.createRef();
  myObjRef = React.createRef();
    
  render() {
    return (
      <div>
        <h2 ref={this.myrefH2}>App</h2>
        <button
          onClick={() => {
            /**
             * ref 可以获取绑定的标签元素，然后进行操作
             */
            console.log(this.myrefH2.current);
          }}
        >
          ref获取html元素
        </button>

        <Son ref={this.myObjRef} />
        <button
          onClick={() => {
            /**
             * 获取绑定的整个组件对象
             */
            console.log(this.myObjRef);
          }}
        >
          ref获取组件对象
        </button>
      </div>
    );
  }
}

子组件代码

import React, { Component } from "react";

export default class Son extends Component {
  state = {
    uname: "SON",
  };
  render() {
    return <div>Son</div>;
  }
}