1.父向子传数据

父子传递数据，使用props，由于存在单向数据流，子组件不允许直接向父组件传递数据。

// 父组件
import React, {Component} from "react";
import Child from "./child";

class Parent extends Component{

  state = {
    count: 99
  }

  btnClick = () => {
    const count = this.state.count;
    this.setState({
      count: count + 1
    })
  }

  subClick = () => { // 子组件调用父组件方法，完成子组件向父组件传值
    const parent_val = this.props.count;
    this.props.sub(parent_val - 1);
  }

  render() {
    return (
      <div>
        parent
        <button onClick={this.btnClick}>修改父组件值</button>
        <Child count={this.state.count} sub={this.subClick}/>
      </div>
    )
  }
}

export default Parent;


// 子组件child
import React, {Component} from "react";

class Child extends Component{

  subClick = () => { // 子组件向父组件传值
    const parent_val = this.props.count;
    this.props.sub(parent_val - 1);
  }

  render() {
    return (
      <div>
        child
        接受到来自父组件的值:{this.props.count}
        <button onClick={this.subClick}>向父组件传值</button>
      </div>
    )
  }
}

export default Child;

效果：

2.兄弟组件传值

兄弟组件传值和子向父传值类似，都是借助父组件的方法。

import React, {Component} from "react";
import Child from "./child";
import Child2 from "./child2";

class Parent extends Component{

  state = {
    count: 99,
    val: 0
  }

  btnClick = () => {
    const count = this.state.count;
    this.setState({
      count: count + 1
    })
  }

  saveVal = (val) => { // child2向child传值
    this.setState({
      val
    })
  }

  subClick = (count) => {
    this.setState({
      count: count
    })
  }

  render() {
    return (
      <div>
        parent
        <button onClick={this.btnClick}>修改父组件值</button>
        <Child count={this.state.count} val={this.state.val} sub={this.subClick}/>
        <Child2 saveVal={this.saveVal}/>
      </div>
    )
  }
}

export default Parent;


child子组件
class Child extends Component{

  subClick = () => {
    const parent_val = this.props.count;
    this.props.sub(parent_val - 1);
  }

  render() {
    return (
      <div>
        child
        接受到来自父组件的值:{this.props.count}
        兄弟组件的值:{this.props.val}
        <button onClick={this.subClick}>向父组件传值</button>
      </div>
    )
  }
}

export default Child;


child2子组件
class Child2 extends Component{

  state = {
    val: 78
  }

  addClick = () => { // 向兄弟组件传值
    const val = this.state.val;
    this.props.saveVal(val + 1);
    this.setState({
      val: val + 1
    })
  }

  UNSAFE_componentWillMount() {  // 将要废弃的钩子，调用此钩子，组件挂载时，修改child的值
    this.props.saveVal(this.state.val);
  }

  render() {
    return (
      <div>
        child2
        <button onClick={this.addClick}>点击修改兄弟组件的值</button>
      </div>
    )
  }
}

export default Child2;

效果：

3.使用发布订阅模式修改兄弟组件的值

借助PubSubJS实现发布订阅

安装：npm install pubsub-js

// child2
import PubSub from 'pubsub-js';


class Child2 extends Component{

  state = {
    val: 78
  }

  MY_TOPIC = 'add'

  pubAddClick = () => { // 使用发布订阅模式
    // 由于是child2修改child的值，因此child2是发布者
    const val = this.state.val;
    this.setState({
      val: val + 1
    })
    PubSub.publish(this.MY_TOPIC, val+1); // 发布消息
  }

  render() {
    return (
      <div>
        child2
        <button onClick={this.pubAddClick}>点击修改兄弟组件的值(发布订阅)</button>
      </div>
    )
  }
}

export default Child2;

// child
import React, {Component} from "react";
import PubSub from 'pubsub-js';

class Child extends Component{
  state = {
    val: 0,
    token: ''
  }

  componentDidMount() {
    const MY_TOPIC = 'add'
    const self = this;
    var token = PubSub.subscribe(MY_TOPIC, function (msg, data){
      self.setState({
        val: data
      })
    });
    this.setState({
      token
    })
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.state.token);
  }

  render() {
    return (
      <div>
        child
        接受到来自父组件的值:{this.props.count}
        订阅来自child2的值:{this.state.val}
      </div>
    )
  }
}

export default Child;

效果:

其他传递方式，参见react-redux