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

时间:2016-06-18 14:31:15

标签: javascript html css user-interface reactjs

根据传递给容器的某些条件变量,从容器返回不同的表示组件元素是否为反模式?

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

所以我的问题是,根据某些道具( summary = true / false )创建一个返回<CustomersSummaryComponent><CustomersDetailsComponent>的容器组件是否可以接受)传递给它?这样我就可以在SAP的任何地方包含Customers域,并以适合的方式对其进行参数化。这是可取的还是使代码难以维护?

1 个答案:

答案 0 :(得分:0)

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