Question

假设我有一个@3x组件列表，可以是类型，例如Car，Truck或Boat。

呈现每种类型的帖子的道具是相同的，只有布局不同。

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

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>

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

1 个答案:

内部组件

包装器组件