Question

我有一系列的组件

let components = [
    {name: 'Home', component: <Home />},
    {name: 'About', component: <About />},
    {name: 'Contact', component: <Contact />},
];

最初，所有组件都没有道具。有什么方法可以在组件渲染时即时添加道具？

components.map((c, i) => (
    <View key={i}>
      {c.component} // e.g <Home params={{data: []}} />
    </View>
))

Answer 1

您可以执行以下操作。

创建一个高级组件，其唯一任务是将道具从其自身的道具复制到子组件。

<WrapperCOmponent {...props}> // pass props you want to pass dynamically
{c.component}
</WrapperCOmponent>

HOC逻辑：

const hoc = (WrappedComponent) => (props) => {


return (
<div>
  <WrappedComponent {...props}>
    {props.children.toUpperCase()}
  </WrappedComponent>
</div>)}

当组件在本机渲染时动态添加组件道具

1 个答案: