reactjs - 如何根据 prop 值加载 React 组件

Question

我正在将图标组件与“@ Fluentui/react-northstar”库一起使用，如下所示

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

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

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，因为如果它不正确，可能会出现错误。为了防止你可以提前做一些测试。