反应相同数据的不同表示，参数化容器组件渲染

Question

根据传递给容器的一些条件变量，从容器返回不同的表示组件元素是一种反模式吗？

我有 SummaryPageComponent 和 CustomersPageComponent 的路线。摘要页面有一个分区，其中显示了客户页面更详细显示的相同数据块。创建两个包含相同数据和逻辑的 distinct 容器组件只是为了将该数据传递给不同的表示组件是多余的。将逻辑包含到表示组件中也不是一种意见。

所以我的问题是，创建一个容器组件是否可以接受，该组件根据传递给它的某些道具（例如summary=true/false）返回<CustomersSummaryComponent> 或<CustomersDetailsComponent> ?这样我就可以在我的 SAP 中的任何位置包含客户域，并以适合的方式对其呈现进行参数化。这是可取的还是会使代码难以维护？

Answer 1

如果使用高阶组件 (HOC) 完成，那很好，因为您可以重用逻辑。例如，YouTube 播放器可以显示大小屏幕，而显示组件不知道怎么做，只是响应屏幕大小的行为变化，使用高阶组件抽象逻辑：https://github.com/mathieuancelin/react-conditional-render 和 https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.hebgpvtup