反应：可以通过道具将一个组件传递到另一个组件吗？

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用来传递Route中的组件的方式。