通过函数指针和传递道具渲染组件

Question

我有一个指针数组componentArray，但我很难找到在ParentComponent中同时呈现它们的语法

function Component1() {
return(
<h1>Hello from Component 1</h1>
);
}
function Component2() {
return(
<h1>Hello from Component 2</h1>
);
}
export const componentObject = [{
name: "Component1",
pointer: Component1
}, {
name: "Component2",
pointer: Component2
}];
function ParentComponent(props) {
return (
<div>
{Object.entries(componentObject).map((ChildComponent) => (
<span>{ChildComponent[1]() DOESNOTWORKPROP="Test"}</span>
))}
</div>
);
};

如果删除DOESNOTWKRPROP="TEST"，以上内容将起作用，但在尝试为子对象添加道具时将不起作用。

Answer 1

这里不应该将ChildComponent作为函数直接调用。您应该使用"；标签语法"；，如下所示：

function ParentComponent(props) {
return (
<div>
{componentObject.map(({ pointer: ChildComponent }) => (
<ChildComponent DOESWORKPROP="Test" />
))}
</div>
);
};

请注意，标记中使用的变量应该使用PascalCase for react来接受它，因此在销毁pointer后重命名为ChildComponent。

以下是相关文档：https://reactjs.org/docs/jsx-in-depth.html#choosing-运行时的类型

额外奖励：您应该为使用map生成的元素提供道具key。在这里，您可以使用组件的名称；(

<ChildComponent key={ChildComponent.name} DOESWORKPROP="Test" />

---

更进一步，当您直接在此处调用函数时：

<span>{ChildComponent[1]() DOESNOTWORKPROP="Test"}</span>

您的组件会立即执行并返回静态JSX，就好像您的代码变成了：

<span>{<h1 DOESNOTWORKPROP="Test">Hello from Component 1</h1>}</span>

这就是为什么您的道具不适用：它们被传递到静态JSX元素，而不是组件的动态渲染过程

Answer 2

因为componentObject是一个数组，所以只需要使用map()。

尝试这种方式：

function ParentComponent(props) {
return (
<div>
{componentObject.map(({ pointer }) => {
const ChildComponent = pointer;
return <ChildComponent DOESNOTWORKPROP="Test" />
})}
</div>
);
};