一次洗脚经历我搞懂了react组件传值的5种方法_react组件传值的方式有几种解释-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40686529/article/details/109303847

本文通过一次洗脚经历生动解释了React组件间5种传值方法：1) 父子传值，包括父传子和子传父；2) 嵌套传值，利用React.createContext实现；3) 兄弟传值，通过父组件作为中介；4) events模块全局订阅；5) Redux全局状态管理。文中还给出了相关代码示例和参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个程序员，经过一天高强度的代码工作之后，我们经常会选择去火锅店洗个脚，顺便做点服务来解除疲劳。

1、父子传值

如果进店时小红刚好躺在门口的沙发上玩手机，我就可以直接让她给我洗脚。

① 父传子。

作为父组件的Me，找到小红XiaoHong组件之后，在XiaoHong的属性里，把信息给她。

class Me extends Component {
  render() {
    return <XiaoHong xijiao="小红过来给我洗脚"></XiaoHong>;      // 使用属性传值
  }
}

子组件XiaoHong，使用props来接收我的信息。

class XiaoHong extends Component {
  render() {
    return <h1>{this.props.xijiao}</h1>;           // 这里的xijiao就是我传给小红的信息
  }
}

② 子传父。

小红看到我很开心，表示愿意为我服务，怎么转达给我呢？就需要使用子传父的方式。

父组件Me预先设定好接收子组件XiaoHong的方法service，并把此方法使用属性带给子组件XiaoHong。

class Me extends Component {
  service(msg) {
    console.log(msg);          // 这里的msg就是小红传给我的信息
  }
  render() {
    return (
      <XiaoHong xijiao="小红过来给我洗脚" service={this.service}></XiaoHong>
    );
  }
}

子组件XiaoHong使用方法welCome调用父组件props传过来的service，就可以把信息传给父组件，然后输出欢迎我们的语句。

class XiaoHong extends Component {
  welCome() {
    this.props.service("爸爸，欢迎光临！");
  }
  render() {
    return <h1 onClick={this.welCome.bind(this)}>{this.props.xijiao}</h1>;
  }
}