[英]Warning: <Element /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
I'm trying to automatically create React Elements from strings corresponding to the react-icons library.我正在尝试从对应于 react-icons 库的字符串自动创建 React Elements。 But I am getting the following errors in the console:
但是我在控制台中收到以下错误:
<RiHeartPulseFill />
is using incorrect casing.<RiHeartPulseFill />
使用的大小写不正确。 Use PascalCase for React components, or lowercase for HTML elements.<RiHeartPulseFill>
is unrecognized in this browser.<RiHeartPulseFill>
在此浏览器中无法识别。 If you meant to render a React component, start its name with an uppercase letter. Currently I have a data file that consists of a name and iconName (see below)目前我有一个包含名称和图标名称的数据文件(见下文)
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
I want to dynamically render React elements with the exact name as the iconName in the above datafile as React-icons require specific elements with those names.我想动态渲染 React 元素,其名称与上述数据文件中的 iconName 完全相同,因为 React-icons 需要具有这些名称的特定元素。
Then I try to create a list of navigation links (using the React Router <Link>
syntax and adding a React-icon + Name. See the code below:然后我尝试创建一个导航链接列表(使用 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>
)
})
The issue I run into is the following error: Warning: <RiHeartPulseFill />
is using incorrect casing.我遇到的问题是以下错误:警告:
<RiHeartPulseFill />
使用不正确的大小写。 Use PascalCase for React components, or lowercase for HTML elements.对 React 组件使用 PascalCase,或对 HTML 元素使用小写。
I does not seems to be incorrect as it actually IS PascalCase.我似乎没有错,因为它实际上是 PascalCase。 However when I check dev tools I see the following:
<riheartpulsefill></riheartpulsefill>
但是,当我检查开发工具时,我看到以下内容:
<riheartpulsefill></riheartpulsefill>
I have no Idea why this happens.我不知道为什么会这样。 Any solutions?
任何解决方案?
Extra: Does anyone know how I can also import those icon names based on the initial data files.额外:有谁知道我还可以如何根据初始数据文件导入这些图标名称。 I'm thinking about creating an icon selection tool, so only the selected icons should be imported from the react-icons lib.
我正在考虑创建一个图标选择工具,因此只应从 react-icons 库中导入选定的图标。
If you want to dynamically render these icon components then you'll need to import and specify them in the config instead of strings corresponding to their names.如果您想动态呈现这些图标组件,那么您需要在配置中导入并指定它们,而不是与其名称相对应的字符串。
Example:例子:
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>
);
});
An alternative is to create and export a lookup object for the icon components.另一种方法是为图标组件创建和导出查找 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>
);
});
Use React.createElement.使用 React.createElement。 Take a look here to see how: Create react component dynamically
看看这里看看如何: 动态创建反应组件
Heres my recursive example:这是我的递归示例:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.