React：通过道具将组件传递给另一个组件是否可以？

Question

如果我有一个组件，例如<Foo />，它会呈现如下内容：

<div>
   <Bar />
   {/* ... */}
</div>

是否可以将Bar作为Foo的财产？ <Foo Bar={Bar}/>。所以我可以在渲染Foo期间引用Bar：

render() {
  const Bar = this.props.Bar;
  return (
    <div>
      <Bar />
      {/* ... */}
    </div>
  );
}

我不知道这是不是一个好主意，说实话，只是检查一下是否有人比我更清楚。

我想做这样的事情的原因是因为我想测试一个组件并考虑如何将假依赖注入到组件中。对于一个我正在考虑使用Preact的项目，它不适用于浅渲染，因此我在考虑做一些依赖注入。

通过组件使用的组件将允许我在测试期间伪造它们，通过模拟。

这是个好主意吗？或者不是真的要走的路？...

Answer 1

我不知道为什么这可能是一个坏主意。

当您构建 React 组件时，您正在使用一些语法（JSX）构建 Javascript 对象，该对象将被转换为纯 Javascript 。因此，传递 React 组件就像传递任何 Javascript 对象一样。

有关信息，react-router用于传递路线中的组件的方式。