警告：<element /> 使用不正确的大小写。 对 React 组件使用 PascalCase，或对 HTML 元素使用小写

Question

我正在尝试从对应于 react-icons 库的字符串自动创建 React Elements。 但是我在控制台中收到以下错误：

• 警告： <RiHeartPulseFill />使用的大小写不正确。 对 React 组件使用 PascalCase，或对 HTML 元素使用小写。
• 警告：标签<RiHeartPulseFill>在此浏览器中无法识别。 如果你打算渲染一个 React 组件，那么它的名字以大写字母开头。

目前我有一个包含名称和图标名称的数据文件（见下文）

const categoriesData = [
    {
        name: 'Vitals',
        iconName: 'RiHeartPulseFill',
    },
    {
        name: 'Body',
        iconName: 'RiBodyScanFill',
    },
    {
        name: 'Sleep',
        iconName: 'RiHotelBedFill',
    },
    {
        name: 'Metabolism',
        iconName: 'RiLungsFill',
    },
    {
        name: 'Stress',
        iconName: 'RiMentalHealthFill',
    },
    {
        name: 'Strength & Training',
        iconName: 'RiRunFill',
    },
    {
        name: 'Lifestyle',
        iconName: 'RiCellphoneFill',
    },
]

export default categoriesData

我想动态渲染 React 元素，其名称与上述数据文件中的 iconName 完全相同，因为 React-icons 需要具有这些名称的特定元素。

然后我尝试创建一个导航链接列表（使用 React Router <Link>语法并添加一个 React-icon + 名称。请参见下面的代码：

const menuCategories = categoriesData.map((category) => {
        const IconElement = category.iconName

        return (
            <Link
                to={`/data/${category.name.toLowerCase()}`}
                key={category.name}
                className="flex flex-row items-center gap-2"
            >
                <IconElement />
                {category.name}
            </Link>
        )
    })

我遇到的问题是以下错误：警告： <RiHeartPulseFill />使用不正确的大小写。 对 React 组件使用 PascalCase，或对 HTML 元素使用小写。

我似乎没有错，因为它实际上是 PascalCase。 但是，当我检查开发工具时，我看到以下内容： <riheartpulsefill></riheartpulsefill>

我不知道为什么会这样。 任何解决方案？

额外：有谁知道我还可以如何根据初始数据文件导入这些图标名称。 我正在考虑创建一个图标选择工具，因此只应从 react-icons 库中导入选定的图标。

Answer 1

如果您想动态呈现这些图标组件，那么您需要在配置中导入并指定它们，而不是与其名称相对应的字符串。

例子：

import {
  RiHeartPulseFill,
  RiBodyScanFill,
  RiHotelBedFill,
  RiLungsFill,
  RiMentalHealthFill,
  RiRunFill,
  RiCellphoneFill,
} from "react-icons/ri";

const categoriesData = [
  {
    name: 'Vitals',
    iconName: RiHeartPulseFill,
  },
  {
    name: 'Body',
    iconName: RiBodyScanFill,
  },
  {
    name: 'Sleep',
    iconName: RiHotelBedFill,
  },
  {
    name: 'Metabolism',
    iconName: RiLungsFill,
  },
  {
    name: 'Stress',
    iconName: RiMentalHealthFill,
  },
  {
    name: 'Strength & Training',
    iconName: RiRunFill,
  },
  {
    name: 'Lifestyle',
    iconName: RiCellphoneFill,
  },
];

export default categoriesData;

const menuCategories = categoriesData.map((category) => {
  const IconElement = category.iconName;

  return (
    <Link
      to={`/data/${category.name.toLowerCase()}`}
      key={category.name}
      className="flex flex-row items-center gap-2"
    >
      <IconElement />
      {category.name}
    </Link>
  );
});

另一种方法是为图标组件创建和导出查找 object。

import {
  RiHeartPulseFill,
  RiBodyScanFill,
  RiHotelBedFill,
  RiLungsFill,
  RiMentalHealthFill,
  RiRunFill,
  RiCellphoneFill,
} from "react-icons/ri";

export const iconMap = {
  RiHeartPulseFill,
  RiBodyScanFill,
  RiHotelBedFill,
  RiLungsFill,
  RiMentalHealthFill,
  RiRunFill,
  RiCellphoneFill,
};

const categoriesData = [
  {
    name: 'Vitals',
    iconName: 'RiHeartPulseFill',
  },
  {
    name: 'Body',
    iconName: 'RiBodyScanFill',
  },
  {
    name: 'Sleep',
    iconName: 'RiHotelBedFill',
  },
  {
    name: 'Metabolism',
    iconName: 'RiLungsFill',
  },
  {
    name: 'Stress',
    iconName: 'RiMentalHealthFill',
  },
  {
    name: 'Strength & Training',
    iconName: 'RiRunFill',
  },
  {
    name: 'Lifestyle',
    iconName: 'RiCellphoneFill',
  },
];

export default categoriesData;

const menuCategories = categoriesData.map((category) => {
  const IconElement = iconMap[category.iconName];

  return (
    <Link
      to={`/data/${category.name.toLowerCase()}`}
      key={category.name}
      className="flex flex-row items-center gap-2"
    >
      <IconElement />
      {category.name}
    </Link>
  );
});

Answer 2

使用 React.createElement。 看看这里看看如何： 动态创建反应组件

这是我的递归示例：

const demoData = [
{
    tagName: 'MyButtonComponent',
    children: [
        {
            tagName: 'MyChildComponent'
        }
    ]
},
{
    tagName: 'MyOtherComponent'
},
]


function recursivelyRenderChildren(elements) {
    if(elements.length) {
        return elements.map((element, index) => {
            return React.createElement(elementData.tagName, {
                key: element.fieldType+'-'+index,
                children: recursivelyRenderChildren(element.children)
            });
        })
    }
}

const arrayOfElements = recursivelyRenderChildren(demoData)