React中如何将函数从祖父组件Table传递给孙子组件MiniRow避免props钻取

实现方案（按适配优先级排序 #

1. 组件组合模式（最适配当前3层浅嵌套场景） #

当前只有3层组件嵌套，层级很浅，不需要引入任何额外工具就可以解决props drilling问题：

• 直接在 <Table> 层完成 <MiniRow> 组件实例，把删除方法直接绑定给 <MiniRow>，再把生成好的 <MiniRow> 列表作为属性传给 <Row> 组件
• 中间层 <Row> 只需要负责渲染传入的 <MiniRow> 列表，完全不需要接触删除相关的参数，彻底避免逐层透传props
  代码示例：

// Table 组件内部逻辑
const Table = () => {
  const handleDeleteMiniRow = (miniRowId) => {
    // 你的删除行删除逻辑
  }

  return (
    <div className="table">
      {rowList.map(row => (
        <Row
          key={row.id}
          rowData={row}
          // 直接在Table层生成MiniRow实例，绑定删除方法
          miniRowList={row.miniRowData.map(mini => (
            <MiniRow
              key={mini.id}
              data={mini}
              onDelete={() => handleDeleteMiniRow(mini.id)}
            />
          ))}
        />
      ))}
    </div>
  )
}

// Row 组件内部只需要渲染传入的miniRowList即可
const Row = ({ rowData, miniRowList }) => {
  return (
    <div className="row">
      {/* 渲染Row本身的内容
      <div className="inner-table">
        {miniRowList}
      </div>
    </div>
  )
}

2. Context API（适配后续层级加深/多子组件共享方法场景） #

如果后续你的表格嵌套层级继续加深，或者有多个子组件需要共享Table层的状态/方法，可以用React自带的Context API解决props drilling问题：

• 第一步创建Table专属Context

import { createContext, useContext } from 'react'
const TableContext = createContext(null)

• 第二步在Table层用Provider包裹子组件，注入删除方法

const Table = () => {
  const handleDeleteMiniRow = (miniRowId) => {
    // 删除逻辑
  }

  return (
    <TableContext.Provider value={{ handleDeleteMiniRow }}>
      {/* 渲染所有Row子组件，中间层不需要做任何处理 */}
    </TableContext.Provider>
  )
}

• 第三步在MiniRow组件直接获取删除方法

const MiniRow = ({ id }) => {
  const { handleDeleteMiniRow } = useContext(TableContext)
  return (
    <div className="mini-row">
      <button onClick={() => handleDeleteMiniRow(id)}>删除</button>
    </div>
  )
}

Redux 适配性说明 #

你当前的场景使用Redux属于过度设计，完全没有必要：

• Redux更适合大型应用存在大量跨模块、跨路由的全局状态共享、状态需要被多个无关组件消费修改、需要做状态持久化/时间旅行调试等复杂场景。你当前只是单个仪表盘表格的内部方法调用，用上面两个方案完全可以满足需求，学习成本和维护成本都低很多。

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