javascript - 动态设置 React 组件的 props

Question

我有一个道具值对象，其中键是组件的名称，值是道具的值

{
    "ComponentA.prop1": 23,
    "ComponentA.prop2": 100,
    "ComponentB.prop3": 200,
}

然后我将所有这些组件都放在一个表单中

<form>
   <ComponentA />
   <ComponentB />
</form>

如何优雅地将所有定义的道具动态传递给正确的组件。

标签： javascriptreactjs

Answer 1

为什么不改变数据结构？

const data = [
  {
    component: ComponentA,
    props: {
      ...componentAprops,
    },
  },
  {
    component: ComponentB,
    props: {
      ...componentBprops,
    },
  },
  {
    component: ComponentC,
    props: {
      ...componentCprops,
    },
  },
];

然后你可以简单地将它们映射到 ui 组件中

const elements = data.map(d => {
  const Component = d.component;
  return <Component {...d.props} />;
});