如何直接传递React组件作为Prop并动态传入item参数？

我有三个层级嵌套的React组件：

• Priority（最上层组件）
  • Base（中间层组件）
    • ItemDialog（最下层组件）

需求是：Priority组件需要从最下层的ItemDialog组件获取item参数。目前的实现代码如下：

现有组件代码 #

Priority组件 #

export Priority = () => {
  const itemDialogFields = (item) => {
    return (
      <ItemDialogFields item={item} />
    )
  }

  return (
    <Base itemDialogFields={itemDialogFields} />
  )
}

Base组件 #

export Base = ({itemDialogFields}) => {
  return (
      <ItemDialog itemDialogFields={itemDialogFields} />
  )
}

ItemDialog组件 #

export ItemDialog = ({itemDialogFields}) => {
  return (
    {itemDialogFields(item)}
  )
}

我想移除Priority组件里的itemDialogFields函数，改成直接把ItemDialogFields组件作为prop传给Base，类似下面的写法：

export Priority = () => {
  return (
    <Base itemDialogFields={<ItemDialogFields item={item} />} />
  )
}

但问题是ItemDialogFields需要的item参数是在ItemDialog组件内部生成的，原来的写法是通过函数回调传入的，现在直接传组件实例的话，不知道该怎么把item参数传给ItemDialogFields？

解决方案 #

核心思路是把「组件本身」和「后续要传入的参数」解耦，有两种简洁的实现方式：

方式一：传递组件构造器而非实例（推荐） #

这种方式最直接，把ItemDialogFields组件的函数/类本身传下去，到ItemDialog里再渲染并传入item参数：

1. 改写Priority组件：

export Priority = () => {
  return (
    <Base itemDialogComponent={ItemDialogFields} />
  )
}

2. 改写Base组件：

export Base = ({itemDialogComponent}) => {
  return (
    <ItemDialog itemDialogComponent={itemDialogComponent} />
  )
}

3. 改写ItemDialog组件：

export ItemDialog = ({itemDialogComponent: ItemDialogFields}) => {
  // 这里的item是组件内部已有的变量
  return (
    <ItemDialogFields item={item} />
  )
}

方式二：保持render props模式但简化写法 #

如果不想改prop的传递逻辑，也可以用箭头函数简化Priority里的写法，不用单独定义函数：

export Priority = () => {
  return (
    <Base itemDialogFields={(item) => <ItemDialogFields item={item} />} />
  )
}

这种写法本质还是保留了原来的回调逻辑，但去掉了单独的函数声明，也能达到简化代码的目的。

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