React中如何基于prop传递的组件名动态渲染图标组件

实现方法 #

你导入的* as Icon是包含所有 Feather 图标组件的对象，需要用对象动态属性访问语法获取对应图标，再将其赋值给首字母大写的变量即可作为组件渲染。

修改后的子组件 Button 代码如下：

import React from 'react';
import * as Icon from "react-icons/fi";

import './button.scss';

function Button(props) {
    // 动态取对应图标组件，变量首字母必须大写才能被React识别为组件
    const DynamicIcon = Icon[props.icon];
    return(
        <button>
            {/* 增加判空逻辑避免传入不存在的图标名时报错 */}
            {DynamicIcon && <DynamicIcon />}
        </button>
    )
}

可选优化 #

• 增加图标不存在时的兜底逻辑，避免渲染空白：

const DynamicIcon = Icon[props.icon] || Icon.FiAlertCircle;

• 支持自定义图标尺寸、颜色等属性：
  父组件调用时传递参数：

<Button icon="FiSun" iconProps={{size: 18, color: '#f59e0b'}} />

子组件渲染时透传属性：

{DynamicIcon && <DynamicIcon {...props.iconProps} />}

内容的提问来源于stack exchange，提问作者Jonas