javascript 警告：< Element />使用了不正确的大小写,请对React组件使用PascalCase，或对HTML元素使用小写

xj3cbfub 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(84)

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

警告：<RiHeartPulseFill />使用的大小写不正确。请对React组件使用PascalCase，或对HTML元素使用小写。
警告：标记<RiHeartPulseFill>在此浏览器中无法识别。如果要呈现React组件，请以大写字母开头。

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

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图标需要具有这些名称的特定元素。
然后，我尝试创建一个导航链接列表（使用React Router <Link>语法并添加React图标+名称。请参见下面的代码：

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库中导入。

JavaScript

来源：https://stackoverflow.com/questions/75256506/warning-element-is-using-incorrect-casing-use-pascalcase-for-react-compone

2条答案

按热度按时间

d6kp6zgx1#

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

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>
  );
});

另一种方法是为图标组件创建并导出查寻对象。
一个二个一个一个

赞(0）回复(0）举报 2023-01-29

bvjxkvbb2#

使用React.createElement。请查看此处以了解如何操作：Create react component dynamically
下面是我的递归示例：

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)

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 警告：< Element />使用了不正确的大小写,请对React组件使用PascalCase，或对HTML元素使用小写

2条答案

相关问题

热门标签

最新问答