时间戳

首页 > 解决方案 > 反应：通过字典传递反应图标？

javascript - 反应：通过字典传递反应图标？

问题描述

我有一个辅助数据文件来减少一个组件中的代码，因此我使用了一个filteringOptionData.ts具有以下结构的外部文件：

import styled from 'styled-components';
import { FaTaxi } from 'react-icons/fa';

export const TaxiIcon = styled(FaTaxi)``;

export default [
  {
    icon: TaxiIcon,
    title: 'general use',
    path: '/ads/general-use/',
  },
  {
    icon: TaxiIcon,
    title: 'taxi',
    path: '/ads/taxi/',
  },
  {
    icon: TaxiIcon,
    title: 'nominal',
    path: '/ads/nominal/',
  },
  {
    icon: TaxiIcon,
    title: 'for electric cars',
    path: '/ads/electric-cars/',
  },
  {
    icon: TaxiIcon,
    title: 'for historic cars',
    path: '/ads/historic-cars/',
  },
];

当我尝试循环此数组并获取图标时，我收到此错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, shouldForwardProp, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead.

这就是我试图获取图标的方式：

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

标签： javascriptreactjstypescript

解决方案

只需将图标更新为如下所示：

export default [
  {
    icon: <TaxiIcon />,
    title: 'general use',
    path: '/ads/general-use/',
  },
  ...
]

推荐阅读