React组件设置默认值：react-icons未传入时渲染文本报错如何解决

云原生阿岚

2026-10-1

React图标组件不传入参数时报错的解决方法

报错原因

<Icon FaIcon/>写法的问题：JSX语法中，仅写属性名不赋值时，该属性的默认值为布尔值true，你在Icon组件内直接将布尔值当做组件调用<FaIcon/>，React要求组件必须是函数/类（自定义组件）或内置HTML标签字符串，布尔值不符合要求，因此抛出类型错误。
传字符串无输出的问题：你将普通字符串（如"Test"）当做组件调用时，仅内置HTML标签字符串（如"div"、"span"）会被正常渲染，普通字符串会被识别为不存在的自定义组件，因此无输出。
默认值失效的问题：你之前将FaIcon的默认值设为字符串"NoIcon"，同样会触发上述字符串当做组件调用的问题，无法正常渲染文本。

修复方案

调整Icon组件的渲染逻辑，先判断传入的FaIcon是否为有效组件（react-icons导出的均为函数组件），是则渲染为组件，否则直接渲染文本内容，无有效传入值时显示默认的"NoIcon"。
修改后的组件代码如下：

import React from 'react';
import { FaHeart} from "react-icons/fa";

const Icon = ({FaIcon}) => {
  return (
    <div>
      {
        typeof FaIcon === 'function' 
        ? <FaIcon /> 
        : (typeof FaIcon === 'string' ? FaIcon : "NoIcon")
      }
    </div>
  );
};

export default Icon;