React JS：期望一个字符串但得到：对象

Question

我有一个 icon.js 文件如下所示，用于导出您需要的图标：

import RotateLeftIcon from '@material-ui/icons/RotateLeft';

const iconTypes = {
  LEFT_ROTATION: <RotateLeftIcon />,
};

export const iconNames = {
  LEFT_ROTATION: 'LEFT_ROTATION',
};

export const getIcon = (iconName, props) => {
  const Component = iconTypes[iconName];
  return <Component style={{ ...props }} />;
};

我这样称呼他们：

import React from 'react'

export default function TestingIcons() {
    return getIcon(iconNames.LEFT_ROTATION, {
        color: '#fff',
        fontSize: '1rem',
      });
}

当我执行上述操作时，我收到此错误：Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

如何解决这个问题？

Answer 1

您必须使用以下内容进行编辑：

const iconTypes = {
  LEFT_ROTATION: RotateLeftIcon,
};