如何渲染 JSX 元素数组（React 组件）

Question

我正在尝试渲染一组命名的 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>”，而不是实际的组件。 为什么会发生这种情况，更重要的是，如何让 COMPONENTS 进行渲染？

Answer 1

您应该像这样在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} />);
});

Answer 2

第一个错误是查看.map 的使用是否不正确。请记住，.map 遍历每个数组元素并更改它们。现在，您使用它就像是.forEach。

您的代码应该看起来更像这样：

const getItems = this.props.itemslist.map((item, key) => {
  const TYPE = item.type;
  return <TYPE data-attributes={attributes} key={key} />
});

Answer 3

您可以使用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>
);