为什么我的React组件图标作为typeof对象出现？

Question

我正在尝试创建从CSS样式表定义的自定义图标集，但会引发错误“ 警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类函数（用于复合组件），但得到：<myIcon />。您是否意外导出了JSX文字而不是组件？“我不知道为什么。

在myIcon.jsx中，我创建了一个组件myIcon，该组件以jsx形式呈现自定义图标。 myIconsMap创建一个对象图，其中每个键是图标的名称，其值是React组件（由myIcon制成）。

//myIcon.jsx

import React from 'react';
import 'styles/fonts/customIcons.css';

const myIcons = ['randomIcon1', 'randomIcon2'];

const myIcon = props => {
  return <div className={`icon-${props.name}`} />;
};

const myIconsMap = myIcons.reduce((icons, iconName) => {
  icons[iconName] = <myIcon name={iconName} />;
  return icons;
}, {});

const randomIcon1 = myIconsMap.randomIcon1;
const randomIcon2 = myIconsMap.randomIcon2;

export {randomIcon1, randomIcon2};

但是randomIcon1和randomIcon2都返回typeof对象，我很困惑为什么，因为它们都引用了React组件（即`）。我认为这是问题所在；我需要它成为typeof函数而不是对象，然后浏览器才能正确呈现它。

[之后，我将图标从myIcon.jsx导出到allIcons.jsx。该文件是在浏览器中呈现图标的位置：

//allIcons.jsx

import {randomIcon1, randomIcon2} from './myIcon';

export const icons = {
  randomIcon1,
  randomIcon2  
}

const Icon = (name) => {
  const IconComponent =
    icons[`${name.substring(0, 1).toUpperCase()}${name.substring(1)}`];

  return <IconComponent />;
};

任何人都不知道为什么会这样吗？

Answer 1

icons[iconName] = <myIcon name={iconName} />;

此行不会创建新组件。它渲染现有组件，从而生成反应元素。该元素是页面上内容的描述，看起来像这样：

{
  $$typeof: Symbol(react.element),
  type: MyIcon,
  key: null,
  ref: null,
  props: { name: iconName }
}

可以使用它在页面上放置内容，但不能与<IconComponent />之类的JSX标签一起使用。那会尝试再次渲染它，因为它已经被渲染，所以不会发生。要使用此元素，您必须执行以下操作：

const Icon = (name) => {
  const iconElement =
    icons[`${name.substring(0, 1).toUpperCase()}${name.substring(1)}`];

  return iconElement;
}

另一种方法（也是我推荐的方法）是为每个图标创建单独的组件。为此，您只需要将现有代码包装在一个函数中，然后将其变成一个组件即可。

icons[iconName] = () => <myIcon name={iconName} />;