React中无法渲染SVG组件的问题排查与解决请求

嘿，你碰到的这个问题其实是React组件渲染的一个常见小坑——你现在只是把组件函数本身直接丢进JSX里了，但React需要的是实例化后的JSX元素，得用标签形式来渲染组件，而不是直接写函数引用。

问题根源 #

你打印item.icon看到的function()就是SVG组件的定义函数，React不会自动把函数转换成可渲染的DOM元素，必须用<Component />这种JSX语法来调用它，这样React才会执行这个函数、生成对应的SVG节点并渲染出来。

直接解决方案 #

把你渲染图标的那一行{item.icon}改成<item.icon />就搞定了，修改后的完整渲染代码如下：

info.map((item, i) => (
  <li key={i} className="inline-flex"> {/* 记得加key，React列表渲染要求每个子项有唯一标识 */}
    <item.icon />
  </li>
))

额外补充细节 #

1. 列表key的重要性：上面给<li>加了key={i}，这是React列表渲染的强制要求，避免控制台警告。如果你的info数组里有唯一id字段，用id当key会比索引更稳妥。
2. 传递自定义props：如果需要给SVG组件传自定义属性（比如尺寸、颜色），直接在标签里加就行，比如：

   <item.icon width="22" height="22" style={{ color: '#666' }} />
   

你的People这类SVG组件已经是符合规范的React函数组件了，用<item.icon />的形式调用后，React就会执行组件函数，返回内部的<svg>元素并正常渲染到页面上啦。

内容的提问来源于stack exchange，提问作者fox