如何在React的组件中让一个数组的元素作为子组件填入呢？

Question

请问下，各位老师有遇到过这样的需求吗？
让数组元素作为子组件。

// 引入其他小组件
import OpenedTools from '../SidebarComp/OpenedTools'
import Search from '../SidebarComp/Search'

const compList = [
  OpenedTools,
  Search,
  ...
]


// 创建组件 
const activityIndex = 1

return (

  <div>
    // 这里我想要基于activityIndex 从compList中选出对应的小组件
  </div>
)

Answer 1

组件是动态的呗？就正常写 JSX 就好了：

const ActivityComp = compList[activityIndex];
return (
 <div>
  <ActivityComp />
 </div>
);

只要别 (<compList[activityIndex] />) 这么写就行，JSX 里 Element 不能是一个表达式。