Arrays react将字符串转换为react组件

这可能有点奇怪，我有一个字符串数组和一堆React组件。 例如：

const str = ['server','volume','route']

const Server = () => 'This is a server'
const Volume = () => 'This is a server'

诸如此类，你明白了

我试图将str映射到匹配的react组件并返回组件

我知道我可以使用一个循环和一个开关来检查每个项目并返回相应的组件，但是有没有这样的创意：

{str.map(Y => <Y />)}

{str.map（Y=>）}

不是一个非常常见的用例，但绝对可能。 首先将所有项目转换为组件

const data = const str = ['server','volume','route']
const components = data.map(x => props => <div {...props}>{x}</div>)

const data=const str=['server'、'volume'、'route']
const components=data.map（x=>props=>{x}）

现在渲染每一个

return components.map((Component, i) => <Component key={i} customProp='foo'/>)

返回组件.map（（组件，i）=>）

您需要使用对象作为组件映射，如下所示：

const componentsMap = {
  "server": Server,
  "route": Route,
  "volume": Volume
}

{str.map(key => {
  const TheComponent = componentsMap[key];
  return <TheComponent />
})}

const组件映射={
“服务器”：服务器，
“路线”：路线，
“体积”：体积
}
{str.map（键=>{
常量组件=组件映射[键]；
返回
})}