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

Question

假设我有一个发布组件列表，其类型可以是汽车、卡车或船。

渲染每种类型的帖子的 Prop 是相同的，只是布局不同。

我应该为每种类型创建一个单独的组件吗？ (CarPosting、TruckPosting)，然后根据 type 属性渲染正确的方法，或者我应该为 Posting 组件中的每种类型提供一个部分渲染方法，我将其然后从主渲染方法切换并调用？

Answer 1

对于每个发布，您应该有一个单独的组件，然后包装器组件应该决定要渲染哪个内部组件。

内部组件

您绝对应该为每种类型拥有一个单独的组件(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 方法来接受 props，并根据您注册的内容将 props 重新传递给组件的新实例。

示例:

componentFactory.buildComponent("boat", someBoatProps)

现在，您可以从包装器组件中调用 componentFactory 来为您生成组件。像这样:

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