React中通过字典传递react-icon渲染时报对象无效错误如何解决？

AI 小北

2026-10-7

问题原因

你存入filteringOptionData.ts数组的icon字段是styled-components生成的React组件类型对象，不是已经完成渲染的React元素。直接将组件对象作为子元素插入JSX时，React无法将原生JS对象识别为合法的可渲染节点，因此抛出对应报错。

解决方法

有两种可行的修改方案，按需选择即可：

方案1：修改渲染逻辑，将组件作为标签调用
把渲染代码里的{filter.icon}修改为组件调用的格式，就可以正常渲染，也可以按需传入大小、颜色等自定义props：

{filterTab.title === 'type' && (
   <FilterTypes>
      {filteringOptionData.map((filter, i) => (
      <FilterOptionWrapper key={i}>
         <filter.icon size={16} color="#222" />
         <FilterOptionTitle>{filter.title}</FilterOptionTitle>
       </FilterOptionWrapper>
       ))}
   </FilterTypes>
)}

方案2：修改数据定义，直接存入渲染完成的React元素
不需要修改原有渲染逻辑，只要调整filteringOptionData.ts里的数组定义，给TaxiIcon加上尖括号即可：
```
export default [
  {
    icon: <TaxiIcon />,
    title: 'general use',
    path: '/ads/general-use/',
  },
  // 其余条目同理修改icon字段即可
]
```