insertAdjacentHTML 为函数显示 [object, Object]

Question

我下面有一些 JSX 被注入到 firstComment 元素之前的 DOM 中。

里面有几个简单的函数 return svgs。当浏览器运行 thumbsUp() 和 thumbsDown() 函数时，它们显示为 [object Object] [object Object].

如果不直接用 svgs 替换函数，我怎样才能让这段代码工作？如果需要，我愿意使用与 insertAdjacentHTML 不同的方法。

const postComment = (inputValue) =>
{
  const d1 = document.getElementById('firstComment')
  d1.insertAdjacentHTML('beforebegin',
    ` 
      <div>
        <div class="comment-avatar"></div>
          <div class="comment-container">
            <h5 class="commentorName">Guest</h5>
            <div class="dateOfComment">Just Now</div>
            <p class="comment">${inputValue}</p>
            <div class="thumbs">
              <span class="thumbsUpIcon">
                ${thumbsUp(16)}
              </span>
              <span class="thumbsDownIcon">
                ${thumbsDown(16)}
              </span>
            </div>
            <p class="replyText">REPLY</p>
          </div>
      </div>
    `
  )
}

函数

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>
      ) 
  }

Answer 1

如果您将 return 由 thumbsUp/thumbsDown 函数编辑的 svg 代码包装在反引号中，使它们成为模板文字，似乎 return svg 就是您预计。我没有得到您描述的 [object Object] 结果，但是如果没有它们，这些函数就无法 return 在代码段编辑器中正确地显示 svg。

const postComment = (inputValue) =>
{
  const d1 = document.getElementById('firstComment')
  d1.insertAdjacentHTML('beforebegin',
    ` 
      <div>
        <div class="comment-avatar"></div>
          <div class="comment-container">
            <h5 class="commentorName">Guest</h5>
            <div class="dateOfComment">Just Now</div>
            <p class="comment">${inputValue}</p>
            <div class="thumbs">
              <span class="thumbsUpIcon">
                ${thumbsUp(16)}
              </span>
              <span class="thumbsDownIcon">
                ${thumbsDown(16)}
              </span>
            </div>
            <p class="replyText">REPLY</p>
          </div>
      </div>
    `
  )
}

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>`
      ) 
}

postComment('hello whirled')

<div id='firstComment'></div>

Answer 2

可以通过在拇指函数中有两个单独的 returns 并有一个参数作为检查来解决（不破坏导入 svgs 的代码的其他部分）。将 insert 设置为 true returns svg 作为字符串，并排除函数调用中的参数 returns 普通 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>
    )
  }

Answer 3

您可以使用 createElement() method and then push your html content to that div using the innerHTML() property. You can now use the insertAdjacentElement() 方法创建一个 div 元素，以在 firstComment 元素上呈现 HTML。

运行以下 代码片段 或者您可以查看此 JSFiddle 以获取实际示例以上方法：

/* JavaScript */
let div = document.getElementById("firstComment");

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>`
}

const htmlContent = document.createElement("div");
htmlContent.innerHTML = `
   <div class="comment-avatar"></div>
   <div class="comment-container">
    <h5 class="commentorName">Guest</h5>
    <div class="dateOfComment">Just Now</div>
    <p class="comment">SomeValue</p>
    <div class="thumbs">
     <span class="thumbsUpIcon">
      ${thumbsUp(16)}
     </span>
     <span class="thumbsDownIcon">
      ${thumbsDown(16)}
     </span>
    </div>
    <p class="replyText">REPLY</p>
   </div>
`;

div.insertAdjacentElement("beforebegin", htmlContent);

/* CSS */
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}

<!-- HTML -->
<div id="firstComment"></div>

insertAdjacentHTML 为函数显示 [object, Object]

insertAdjacentHTML displaying [object, Object] for Functions

javascript

components

jsx

reactjs

react-component