为什么我的 React 组件图标显示为一种对象类型?

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 组件(即 '(。我认为这就是问题所在;我需要它成为一种函数类型而不是对象，然后浏览器才能正确呈现它。

之后，我将我的图标从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} />;

此行不会创建新组件。它呈现现有组件，生成一个 react 元素。该元素是对要放在页面上的内容的描述，如下所示：

{
$$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} />;