使用 React，我如何根据类型渲染组件？

Question

假设我有一个Posting 组件的列表，这些组件的类型可以是汽车、卡车或船。

每种帖子的渲染道具都是一样的，只是布局不同。

我应该为每种类型创建一个单独的组件吗？ （CarPosting、TruckPosting），然后根据type 属性渲染正确的，或者我应该只为Posting 组件中的每种类型设置一个部分渲染方法，然后我从主渲染方法切换和调用？

Answer 1

每个posting 应该有一个单独的组件，然后一个包装器组件应该决定渲染哪个内部组件。

内部组件

您绝对应该为每种类型设置一个单独的组件（CarPosting、TruckPosting...）。这些组件不应该有type 属性，因为当它们被渲染时，渲染的人应该知道它们是否是CarPosting，例如。

至于是否应该对这些组件使用继承，这取决于它们在逻辑方面的共享程度。如果他们只共享一些prop 名称，仅此一项并不能证明使用继承是合理的。事实上，大多数时候 React 组件中不需要继承。有一些方法可以在组件之间共享行为而无需继承，例如使用 Mixins 或简单地共享一些 JS 模块。这实际上取决于您。

包装组件

现在，包装器组件应该根据子组件的类型确定要渲染的子组件。

是的，您可以使用switch 并选择该switch 中的组件。如果您只有 2 或 3 个组件类型并且您不太关心可扩展性，那是可以接受的。

但是，一种更复杂的解决方法是使用ComponentFactory，在其中注册type 和一个组件，如下所示：

// the first parameter is the type, the second is the Component
componentFactory.register("car", CarPosting);
componentFactory.register("boat", BoatPosting);

componentFactory 可以有一个buildComponent 方法接受道具，并根据您注册的内容将道具重新传递给组件的新实例。

例子：

componentFactory.buildComponent("boat", someBoatProps)

现在，您可以从您的包装组件调用componentFactory 为您生成组件。像这样：

// this is inside the render method
<div>
 {
     postings.map(posting => componentFactory.buildComponent(posting.type, someOtherProps))
 }
 </div>