我试图渲染命名react的组分，比如数组<Foo />，<Bar />和<Baz />，例如。
const rendered = [];
const getItems = this.props.itemslist.map((item, key) => {
const TYPE = item.type;
rendered.push(<TYPE data-attributes={attributes} key={key} />);
});
return (
<Grid>
<Row>
{rendered}
</Row>
</Grid>
);
我可以遍历我的数组并在控制台中查看元素数组，但它们呈现为空的 html 元素“ <foo></foo><bar></bar><baz></baz>”，而不是实际组件。为什么会发生这种情况，更重要的是，如何让组件呈现？
您应该item.type像这样使用组件而不是字符串
import Foo from './Foo';
import Bar from './Bar';
[ { type: Foo, }, { type: Bar, }, { type: Baz}]
更新：
如果您事先没有组件引用，则使用映射对象将您的字符串转换为组件引用，如下所示
import Foo from './Foo';
import Bar from './Bar';
const mapper = {
Foo: Foo,
Bar: Bar,
}
// Then use it like this
const getItems = this.props.itemslist.map((item, key) => {
const Type = mapper[item.type];
rendered.push(<Type data-attributes={attributes} key={key} />);
});
第一个错误是查看.map. 请记住，.map遍历每个数组元素并更改它们。现在，您正在使用它，就好像它是.forEach.
您的代码应该更像这样：
const getItems = this.props.itemslist.map((item, key) => {
const TYPE = item.type;
return <TYPE data-attributes={attributes} key={key} />
});
您可以使用React.createElement动态名称创建 React 元素。还要确保导入这些组件。
const rendered = [];
const getItems = this.props.itemslist.map((item, key) => {
const component = React.createElement(item.type, {data-attributes: attributes, key: key}, null);
rendered.push(component);
});
return (
<Grid>
<Row>
{rendered}
</Row>
</Grid>
);