javascript - 是否可以通过数组循环动态生成 react 组件？

Question

不确定标题是否完全清楚(不确定如何措辞)所以让我解释一下。

我想尝试将组件名称列表存储在一个数组中，然后使用 map(或合适的等效项)循环，以便将每个数组值显示为 JSX 组件。

所以有些事情是这样的(欣赏这段代码不起作用，只是想展示我希望实现的目标):

render(){
  let links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
  return (
    <div>{
      links.map((Link) => {
        return <Link key={Link} />
      }
    }</div>
  )
}

理想的结果是:

<div>
  <DashboardLink key='DashboardLink' />
  <CoursesLink key='CoursesLink' />
  <AssignmentLink key='AssignmentLink' />
</div>

然后每个组件都会在 div 中呈现。

我是 React 和 ES6 的新手，所以对于任何明显的错误深表歉意。

谢谢!

Answer 1

然后你可以使用辅助函数:

 render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   var findComponent: function (name){
     switch (name){
         case 'DashboardLink':
             return (<DashboardLink />);
         case 'CoursesLink':
             return (<CoursesLink />);
         case 'AssignmentsLink':
             return (<AssignmentsLink />);
         default:
             return null; //You might want to return something else here//
     }
   }; 
   return (
     <div>
       links.map((Link) => {
         return findComponent(Link);
       }
     </div>
  );
}

你也可以把这个函数放在其他地方......

使用 React.createElement 方法创建自定义组件:第一个参数是标签的名称，第二个是具有属性的对象，您可以将 child 添加为第三个参数。

render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   return (
     <div>
       links.map((Link) => {
         return React.createElement(Link, {key: Link});
       }
     </div>
  );
}

引用:https://facebook.github.io/react/docs/glossary.html