代码改变世界

react 嵌套组件的通信

  muamaker  阅读(759)  评论(0编辑  收藏  举报

在react中经常会用到的组件嵌套,如下:

图中 parent本身是一个自定义的组件,然后内部又加入了 child的自定义组件,那么这种情况,父子之间如何通信

react中在父组件里面有一个 this.props.children  当没有子组件时,值为 undefined ,只有一个子组件时,为一个对象,多个子组件时为一个数组

我们可以使用react提供的方法遍历子组件,并且绑定

代码如下:

child.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from 'react';
 
 
 
 
 
class Child extends Component {
    constructor(props){
        super(props);
        this.state = {date: new Date()};
  }
  showValue=()=>{
    this.props.showValue && this.props.showValue()
  }
  render() {
    return (
      <div className="Child">
        <div className="content">
           Child
           <button onClick={this.showValue}>调用父的方法</button>
        </div>
      </div>
    );
  }
}
 
export default Child;

  

在 parent.jsx中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Component } from 'react';
 
 
class Parent extends Component {
    constructor(props){
        super(props);
        this.state = {date: new Date()};
  }
  showValue=()=>{
    console.log("showValue....")
  }
  renderChildren(props) {
    //遍历所有子组件
    return React.Children.map(this.props.children, child => {
        var childProps = {
          //把父组件的props.name赋值给每个子组件(父组件传值给子组件)
          name: props.name,
          //父组件的方法挂载到props.showValue上,以便子组件内部通过props调用
          showValue:this.showValue
        };
        return React.cloneElement(child,childProps );
    });
  }
  render() {
    return (
      <div className="Parent">
        <div className="content">
           Parent
           {this.renderChildren(this.props)}
        </div>
      </div>
    );
  }
}
 
export default Parent;

  

关键在于:遍历内部的子组件,然后动态的给子组件绑定props

 

编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示