是否可以循环遍历数组以动态生成反应组件？答案

【问题标题】：Is it possible to loop through an array to dynamically generate react components?是否可以循环遍历数组以动态生成反应组件？
【发布时间】：2016-12-25 09:25:21
【问题描述】：

不确定标题是否完全清楚（不知道如何表达）所以让我解释一下。

我想尝试将组件名称列表存储在一个数组中，然后使用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 非常陌生，因此对于任何明显的错误，我深表歉意。

谢谢！

【问题讨论】：

我的答案可能适合你stackoverflow.com/questions/38622714/…
使用React.createElement

标签： javascript reactjs ecmascript-6 jsx

【解决方案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 方法创建自定义组件：第一个参数是标签的名称，第二个是一个有属性的对象，第三个参数可以添加孩子。

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

【讨论】：

问题是这会将<DashboardLink></DashboardLink> 等渲染到DOM。我想要 <DashboardLink /> 组件自己呈现 - 如果这有意义吗？
@Chris 渲染自身是什么意思？
所以数组中的字符串是从其他模块导入的 React 组件的名称。它们中的每一个都包含一个带有 SVG 元素的 div。当我尝试这个解决方案时，我得到<DashboardLink></DashboardLink> 作为一个空的 xml 元素逐字呈现给 DOM。我真正想要的是渲染每个组件中包含的<div><svg /></div>。
然后你必须添加一个辅助函数，通过检查字符串值来呈现该组件。
有道理，但该函数看起来如何？抱歉 - 就像我说的，对此非常陌生

【解决方案2】：

为什么不这样做呢？

import CoursesLink from 'components/CoursesLink';
import DashboardLink from 'components/DashboardLink';
import AssignmentsLink from 'components/AssignmentLink';

getComponentByName(name) {
  switch(name):
    case 'DashboardLink':
      return DashboardLink
    case 'AssignmentsLink':
      return AssignmentsLink;
    case 'CoursesLink':
      return CoursesLink;
    default:
      return <div />
}
render() {
  const links = ['DashboardLink', 'AssignmentLink', 'CoursesLink'];
  return (
    <div>
      {links.map(link => React.createElement(getComponentByName(link), key={link}))}
    </div>
  )
}

【讨论】：

【解决方案3】：

或者，将links 设为函数数组并使用其他键（或函数名称）：

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

您的原始代码不起作用，因为 React 期望 Link 解析为函数，而不是字符串。

【讨论】：