有没有办法通过遍历数组来动态地从 react-icons 导入？

Posted 2023-03-23

【中文标题】有没有办法通过遍历数组来动态地从 react-icons 导入？

【英文标题】：Is there a way to import from react-icons dynamically by iterating through an array?

【发布时间】：2021-12-15 01:00:10

【问题描述】：

这将给出一个错误，但希望它显示得差不多，但我想做。我想在我的组件中有一堆图标（稍后它们将是链接），但我想知道是否有一种方法可以动态引入它们而不是硬编码它们。

数据

const icons = [
    
        title: 'BsGithub',
        path: 'bs'
    , 
        title: 'Bs***',
        path: 'bs'
    , 
        title: 'BsLinkedin',
        path: 'bs'
    ,
]

export default icons

组件文件

import icons from '../../data/icons'
const MyComponent = () => 
    const getIcon = ( title, path ) => 
        import  title  from `react-icons/$path`

        return(
            <h1>
                <title />
            </h1>
        )
    
    return(
        <div>
            icons.map(icon => getIcon(icon))
        </div>
    )

【问题讨论】：

React.lazy (reactjs.org/docs/code-splitting.html)

【参考方案1】：

这是我的最终解决方案，省略了所有与样式相关的代码。

数据

import  BsGithub, Bs***, BsLinkedin  from 'react-icons/bs'

const icons = [
    
        picture: <BsGithub />,
        link: '[insert link here]'
    , 
        picture: <Bs*** />,
        link: '[insert link here]'
    , 
        picture: <BsLinkedin />,
        link: '[insert link here]'
    
]

export default icons

组件文件

import icons from '../../data/icons'

const MyComponent = () => 
    const getIcon = ( picture, link ) => 
        return(
            <a href=link target='_blank'>picture</a>
        )
    
    return(
        <div>
            icons.map(icon => getIcon(icon))
        </div>
    )


export default MyComponent