我正在try 构建一个Reaction Select 组件，该组件可以支持多种不同的子组件类型.
我想做这样的事情:
export const GenericSelect = (props) => {
const { component, items } = props;
return <>{items && items.map((item, index) => <component id={items.id} name={item.name} />)}</>;
};
然后能够像这样使用它:
<GenericSelect component={NonGenericCard} items={items} />
其中，非通用卡支持一组固定的属性(例如，id、名称)，这些属性将由Items对象中的值填充.
我试过了，但它似乎不能在运行时创建<component/>.
Is this possible in Javascript? If so, how can it be accomplished?个
在JSX中，小写的标记名被认为是HTML标记.所以你应该用Component而不是component.
另外，id应该是item.id而不是items.id，并且您应该 for each 元素分配一个键.
export const GenericSelect = (props) => {
const { Component, items } = props;
return (
<>
{items &&
items.map((item, index) => (
<Component key={item.id} id={item.id} name={item.name} />
))}
</>
);
};
<GenericSelect Component={NonGenericCard} items={items} />
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized个