Question

我正在尝试渲染一组命名的反应组件，例如<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

第一个错误是查看config.Routes.MapHttpRoute( name: "PrivateApi", routeTemplate: "private/users", defaults: new { id = RouteParameter.Optional }, constraints: null, handler: new TokenValidationHandler() { InnerHandler = new HttpControllerDispatcher(config) } ); //more general route config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional }, //... );的使用是否错误。请记住，.map遍历每个数组元素并更改它们。现在，您正在使用它，就好像它是.map。

您的代码应该更像这样：

.forEach

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>
);

如何呈现JSX元素数组（React组件）

3 个答案: