如何根据道具值加载反应组件

Question

我正在使用带有 '@fluentui/react-northstar' 库的图标组件，如下所示

import { QnaIcon } from '@fluentui/react-northstar'
const Example1 = () => (
  <>
    <QnaIcon size="large" />
  </>
) 

现在我必须在图标名称来自类似这样的道具时动态加载图标组件

import React from 'react'
import { Button, TeamCreateIcon   } from '@fluentui/react-northstar' 

const Example2 = ({iconName}) => {
 
const MyIcon = <iconName /> ; //here I need to convert string to component 

return (
  <div >
     <Button icon={<TeamCreateIcon />} title="Create" />
     // Here I need set it
     <Button icon={<MyIcon />} title="Create" />    
  </div>
)} 

<Example2 iconName='QnaIcon' />  

code https://codesandbox.io

Answer 1

我是巴西人，因此我会说葡萄牙语，但我会使用翻译来帮助您。

你可以做的是：

import React from 'react'
import { Button, TeamCreateIcon   } from '@fluentui/react-northstar' 

const Example2 = ({iconName}) => {

const ICONS = {
  iconLike: <YourLikeIcon/>,
  iconMenu: <YourMenuIcon/>,
}

return (
  <div >
     <Button icon={<TeamCreateIcon />} title="Create" />
     // Here I need set it
     <Button icon={ICONS[iconName]} title="Create" />    
  </div>
)} 

但是你必须小心iconName，因为如果它不正确，它可能会出错。为了防止你可以事先做一些测试。

Answer 2

我宁愿以不同的方式来做。我会将组件本身作为道具传递给 Example2

<Example2>
  <Icon/>
</Example2>

在实际的组件中，我会使用props.children，其中包含我们上面提到的子组件

import React from 'react'

const Example2 = () => {
 

return (
  <div >
     <Button icon={props.children} title="Create" />
     <Button icon={<MyIcon />} title="Create" />    
  </div>
)} 

编辑

也包括代码框链接

https://codesandbox.io/s/fluent-ui-example-forked-p5lkk?file=/example.js