react.createElement中只有第一个元素被渲染

Question

我需要动态呈现img。以下是我将徽标转换为组件的功能：

import {ReactComponent as MyLogo1} from '../assets/img/logo1.svg'
import {ReactComponent as MyLogo2} from '../assets/img/logo2.svg'
import {ReactComponent as MyLogo3} from '../assets/img/logo3.svg'
export const logoToComponent: any = {
logo_1: MyLogo1,
logo_2: MyLogo2,
logo_3: MyLogo3
};

然后我把它渲染成这样：

[...]
const logo: any = (key: string, props: any) => {
return logoToComponent[key] ? React.createElement(logoToComponent[key], props) : null;
};
return (
[...]
{logo(`logo_${category.code}`, { className: "mx-auto mb-3 w-6 h-6" })}
[...]
)

问题是，只渲染第一个徽标。在我的DOM中，当我检查时，每个徽标都在那里，但只有第一个可见。在我的SVG中，填充是为每个徽标设置的。

知道为什么React只渲染第一个元素吗？

PS:如果我删除logoToComponent函数中的第一行，则第二行可见，而不是以下行。

Answer 1

我发布了答案，以备不时之需。

每个SVG都具有相同的id"0"；剪辑路径"；。我只是在每个SVG中设置了一个唯一的id，它工作得很好。