Question

在我的React应用程序中，我有一些可选组件，需要根据用户的偏好进行渲染。我可以通过调用API在数组中获得这些组件及其顺序的列表。

该数组将如下所示：

[
   { "id": 23, "name": "WhetherComponent", "label": "Local Whether", "displayOrder": 1 },
   { "id": 477, "name": "NFLComponent", "label": "NFL Results", "displayOrder": 2 },
   { "id": 59, "name": "NBAComponent", "label": "NBA Results", "displayOrder": 3 }
]

在父组件中，我需要在<div>标签中渲染它们。显然，我需要将这些组件导入父组件，但是我需要做些特殊的事情来渲染它们吗？

Answer 1

使用lazy()实现以下目的：

render() {
  return this./*state? props?*/.yourArray.map(ele => {
    const Comp = React.lazy(() => import('./' + ele.name));
    return <div><Comp /></div>; // You said you need to render them within <div>s
  });
}

当然，您可能希望事先基于sort() displayOrder来创建数组。

在React中渲染可选组件列表

1 个答案: