Javascript insertAdjacentHTML显示函数的[object，object]

我在下面有一些JSX，它在

firstComment

元素之前被注入DOM

里面有两个函数，它们只返回SVG。当浏览器运行

thumbsUp（）

和

thumbsDown（）

函数时，它们显示为

[object object]

[object object]

在不直接用SVG替换函数的情况下，如何才能使此代码正常工作？如果需要，我愿意使用不同于insertAdjacentHTML的方法

const postComment=（inputValue）=>
{
常量d1=document.getElementById（'firstComment'）
d1.插入附件TML（“开始前”，
` 
客人
刚才
${inputValue}
${thumbsUp（16）}
${thumbsDown（16）}
回复

`
)
}

功能

const thumbsUp = (width) => {
  return (
    <svg width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M198 448h172c15.7 0 28.6-9.6 34.2-23.4l57.1-135.4c1.7-4.4 2.6-9 2.6-14v-38.6c0-21.1-17-44.6-37.8-44.6H306.9l18-81.5.6-6c0-7.9-3.2-15.1-8.3-20.3L297 64 171 191.3c-6.8 6.9-11 16.5-11 27.1v192c0 21.1 17.2 37.6 38 37.6zM48 224h64v224H48z"/></svg>
    ) 
}

const thumbsDown = (width) => {
    return (
      <svg width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314 64H142c-15.7 0-28.6 9.6-34.2 23.4L50.6 222.8c-1.7 4.4-2.6 9-2.6 14v38.6c0 21.1 17 44.6 37.8 44.6h119.3l-18 81.5-.6 6c0 7.9 3.2 15.1 8.3 20.3l20 20.1L341 320.7c6.8-6.9 11-16.5 11-27.1v-192c0-21.1-17.2-37.6-38-37.6zM400 64h64v224h-64z"/></svg>
      ) 
  }

constthumbsup=（宽度）=>{
返回(
) 
}
常数thumbsDown=（宽度）=>{
返回(
) 
}

如果将

thumbsUp

/

thumbsDown

函数返回的svg代码包装在反勾中，使其成为模板文本，它似乎会返回您期望的svg。我没有得到您描述的[object]结果，但是如果没有这些函数，这些函数在代码段编辑器中无法正确返回svg

const postComment=（inputValue）=>
{
常量d1=document.getElementById（'firstComment'）
d1.插入附件TML（“开始前”，
` 
客人
刚才
${inputValue}
${thumbsUp（16）}
${thumbsDown（16）}
回复

`
)
}
常数thumbsUp=（宽度）=>{
返回(
``
) 
}
常数thumbsDown=（宽度）=>{
返回(
``
) 
}
postComment（“hello whirled”）

可以通过在thumbs函数中使用两个单独的返回值并使用一个参数作为检查来解决（不中断导入SVG的其他代码部分）。将insert设置为true将以字符串形式返回svg，并且排除函数调用中的参数将返回普通svg

不确定它是最优的，但它是有效的

const thumbsDown = (width, insert) => {
  if (insert) {
    return (
      `<svg width=${width} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314 64H142c-15.7 0-28.6 9.6-34.2 23.4L50.6 222.8c-1.7 4.4-2.6 9-2.6 14v38.6c0 21.1 17 44.6 37.8 44.6h119.3l-18 81.5-.6 6c0 7.9 3.2 15.1 8.3 20.3l20 20.1L341 320.7c6.8-6.9 11-16.5 11-27.1v-192c0-21.1-17.2-37.6-38-37.6zM400 64h64v224h-64z"/></svg>`
    ) 
  } 
    return (
      <svg width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314 64H142c-15.7 0-28.6 9.6-34.2 23.4L50.6 222.8c-1.7 4.4-2.6 9-2.6 14v38.6c0 21.1 17 44.6 37.8 44.6h119.3l-18 81.5-.6 6c0 7.9 3.2 15.1 8.3 20.3l20 20.1L341 320.7c6.8-6.9 11-16.5 11-27.1v-192c0-21.1-17.2-37.6-38-37.6zM400 64h64v224h-64z"/></svg>
    )
  }

const thumbsDown=（宽度，插入）=>{
如果（插入）{
返回(
``
) 
} 
返回(
)
}

您可以使用该方法创建一个

div

元素，然后使用属性将html内容推送到该div。现在可以使用该方法在

firstComment

元素上呈现HTML

---

运行以下代码片段，或者您可以检查此以了解上述方法的实际示例：

/*JavaScript*/
让div=document.getElementById（“firstComment”）；
常数thumbsUp=（宽度）=>{
返回``
}
常数thumbsDown=（宽度）=>{
返回``
}
const htmlContent=document.createElement（“div”）；
htmlContent.innerHTML=`
客人
刚才
SomeValue
${thumbsUp（16）}
${thumbsDown（16）}
回复

`;
div.insertadjacentellement（“beforebeagin”，htmlContent）
/*CSS*/
html，正文{宽度：100%；高度：100%；边距：0；填充：0；}

您可以在您的问题中发布
thumbsUp
功能和
thumbsDown
功能吗。当然可以。但就像我说的。他们所做的就是返回svg。我在应用程序中的许多地方都使用它们，因此函数可以按预期工作。如果您将返回的SVG代码转换为字符串，是否可以工作？例如：
const thumbsUp=（width）=>{return'}
@JustinFeakes可以工作，但是在我导入该函数的所有其他区域都会破坏我的代码？例如
${thumbsUp（16）.toString（）}
是的，这确实有效，但也会破坏我的代码中导入thumbs svg的所有其他区域。您的代码在调用可变宽度svg函数的其他地方有何不同？代码的其他地方没有插入任何html。该函数最初只是用来替换较长的svg文本，使我的react组件更具可读性。不同之处在于，在本例中，我调用了一些html中的thumbs函数来插入。啊，从React组件的render方法中调用这些函数的解释不同于使用Villa JS将它们插入。如果不查看所有代码，我就无法判断，但我想知道为什么不能使用React的API而不是
insertAdjacentHTML
来生成相同的行为。如果你给我们看你的反应成分，也许我们可以找到这样的解决方案。否则，您的两次返回答案似乎是一个不错的选择