React如何实现三级子组件向顶层父组件回传props并调用父方法

核心实现逻辑 #

React中没有子组件直接向上层组件传递数据的原生语法，统一通过回调函数逐层透传的方式实现：

• 顶层组件先定义好接收深层数据的处理函数，将函数作为props传给下一级子组件
• 中间层级的子组件不需要处理逻辑，直接将收到的回调函数透传给自己的子组件
• 最底层组件在需要回传数据的时机，调用收到的回调函数，将要传递的数据作为参数传入即可

完整可运行示例代码 #

import React from 'react';

// 顶层父组件
class LevelOne extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            // 用来存储从Level3回传的数据
            levelThreeData: null
        }
    }

    // 定义接收Level3数据的处理函数
    handleLevelThreeData = (dataFromLevelThree) => {
        // 这里可以拿到Level3传上来的数据，做打印、存state等操作
        console.log('从Level3拿到的数据：', dataFromLevelThree);
        this.setState({
            levelThreeData: dataFromLevelThree
        })
    }

    render(){
       return(
           {/* 将处理函数作为props传给Level2 */}
           <LevelTwo sendDataToTop={this.handleLevelThreeData}/>
       )
    }
}

// 中间层组件
class LevelTwo extends React.Component{
    render(){
        return(
            {/* 直接透传从Level1拿到的回调函数给Level3 */}
            <LevelThree sendDataToTop={this.props.sendDataToTop}/>
       )
    }
}

// 最底层组件
class LevelThree extends React.Component{
    // 示例：点击h1的时候触发回传
    handleClick = () => {
        // 调用从上层传下来的回调函数，传入要回传的参数
        this.props.sendDataToTop({
            content: '这是Level3要传给顶层的数据',
            time: new Date().getTime()
        })
    }

    render(){
       return(
          <h1 onClick={this.handleClick}>LEVEL3，点击我回传数据</h1>
       )
    }
}

export default LevelOne;

补充说明 #

如果嵌套层级超过3层，逐层透传回调会比较繁琐，可以用React Context API或者Redux、Mobx这类状态管理工具简化流程，三层嵌套场景下直接透传回调是最轻量化的实现方案。

内容的提问来源于stack exchange，提问作者BarakOren