有没有一种方法可以通过迭代数组来动态地从react-icons导入？

Question

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

数据

const icons = [
    {
        title: 'BsGithub',
        path: 'bs'
    }, {
        title: 'BsStackOverflow',
        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>
    )
}

Answer 1

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

数据

import { BsGithub, BsStackOverflow, BsLinkedin } from 'react-icons/bs'

const icons = [
    {
        picture: <BsGithub />,
        link: '[insert link here]'
    }, {
        picture: <BsStackOverflow />,
        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