警告：<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)