无法在模板文字中执行 SVG 元素

Question

我无法在 React 模板文字内的 svg 元素上实现图标。我收到类似 [object object] 的错误。在“Other”旁边，我想显示一个图标。这是图像

这是代码图片

以上是代码。如果我删除检查 seriesName === 'Other' 的条件，那么我可以轻松加载 SVG，但在这种情况下，我无法在模板字符串内加载 SVG。我该如何解决它？

Answer 1

看来您将反引号``放在了错误的位置。

当条件为真时，后面的勾号应该环绕您打算渲染的 SVG 元素，而不是整个代码块。

这是代码的修订版本：

<span>${seriesName}

${seriesName === 'Other' ? 
    `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 17 7 0 0 1 0 14m0 1A8 8 0 1 0 8 08 80 000 16"/>
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.4691-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465"/>
    </svg>` 
    : ''}
</span>