2

我正在使用带有“ @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' />

代码 https://codesandbox.io

4

2 回答 2

2

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

您可以执行以下操作：

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

于 2021-03-04T13:31:44.840 回答
1

我宁愿以不同的方式来做。我会将组件本身作为道具传递给 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

于 2021-03-04T13:33:36.983 回答