Next.js中如何渲染存储为字符串形式的Lucide React图标组件

嘿，我完全懂你现在的困扰——把图标写成字符串存在数组里，渲染的时候只会显示成纯文本，根本不会变成预期的图标组件对吧？这是因为React不会自动把字符串解析成JSX代码，直接输出字符串就只会原样显示。咱们换个正确的思路来处理，完全不用字符串存图标，下面给你两种可行的方案：

方案1：直接存储JSX图标元素（简单直接） #

这种方式最直观，直接把Lucide图标作为JSX元素存在MenuItems里，不用再处理字符串转换的问题。

第一步：修改MenuItems文件 #

先导入需要的Lucide图标，然后把icon字段替换成对应的JSX元素：

// MenuItems.js
import { House, ContactRound, Phone } from 'lucide-react';

// 定义你需要的颜色变量，或者直接写颜色值
const black = '#000';

export const MenuItems = [
  {
    label: "Home",
    icon: <House color={black} size={32} />, // 直接存JSX元素
    url: "/",
  },
  {
    label: "About",
    icon: <ContactRound size={32} />,
    url: "/about",
  },
  {
    label: "Contact",
    icon: <Phone size={32} />,
    url: "/contact",
  },
];

第二步：在Menu组件中直接渲染 #

现在i.icon已经是React可以识别的JSX元素了，直接输出就行：

// Menu.js
import Link from "next/link";
import { MenuItems } from "./MenuItems";

const Menu = () => {
  return (
    <div className=''>
      {MenuItems.map(item => (
        <div className="" key={item.label}>
          <Link href={item.url}>
            {/* 直接渲染图标JSX */}
            {item.icon}
            <span>{item.label}</span>
          </Link>
        </div>
      ))}
    </div>
  );
};
export default Menu;

方案2：存储图标组件+配置props（更灵活） #

如果想统一控制所有图标的样式（比如统一改size），或者需要动态传props，这种方式会更合适。我们把图标组件本身存在icon字段，再单独存props配置，渲染的时候动态生成组件。

第一步：修改MenuItems文件 #

// MenuItems.js
import { House, ContactRound, Phone } from 'lucide-react';

export const MenuItems = [
  {
    label: "Home",
    icon: House, // 存图标组件本身（注意是大写开头的组件名）
    url: "/",
    iconProps: { color: '#000', size: 32 }, // 该图标专属的props
  },
  {
    label: "About",
    icon: ContactRound,
    url: "/about",
    // 可以不写iconProps，用默认配置
  },
  {
    label: "Contact",
    icon: Phone,
    url: "/contact",
  },
];

第二步：在Menu组件中动态渲染 #

把组件赋值给大写开头的变量（React要求组件名必须大写），然后合并默认props和专属props，再渲染：

// Menu.js
import Link from "next/link";
import { MenuItems } from "./MenuItems";

const Menu = () => {
  // 所有图标默认的props，统一控制
  const defaultIconProps = { size: 32, color: '#000' };

  return (
    <div className=''>
      {MenuItems.map(item => {
        // 把组件赋值给大写开头的变量
        const Icon = item.icon;
        // 合并默认props和当前图标的专属props
        const finalProps = { ...defaultIconProps, ...item.iconProps };
        
        return (
          <div className="" key={item.label}>
            <Link href={item.url}>
              {/* 渲染图标组件，传入合并后的props */}
              <Icon {...finalProps} />
              <span>{item.label}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
};
export default Menu;

重要提醒：别用dangerouslySetInnerHTML！ #

可能你会搜到用dangerouslySetInnerHTML来解析字符串成JSX的方法，但绝对不要用！这种方法有严重的XSS安全风险，而且处理组件props会非常麻烦，完全没必要为了这个需求冒风险。

总结一下，核心思路就是：不要把JSX以字符串形式存储，直接用React的方式存储组件或者JSX元素，这样React才能正确识别并渲染它们~

备注：内容来源于stack exchange，提问作者Rey