insertAdjacentHTML显示功能的[对象，对象]

问题描述 投票：-1回答：3

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

内部有几个仅返回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>
      ) 
  }
javascript reactjs components jsx react-component
3个回答
1
投票

可以通过在thumbs函数中有两个单独的返回，并使用一个参数作为校验来解决（不破坏导入svgs的代码的其他部分）。将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>
    )
  }
0
投票

如果将thumbsUp / thumbsDown函数返回的svg代码包装在反引号中，使它们成为模板文字，则似乎会返回您期望的svg。我没有得到您描述的[object Object]结果，但是如果没有这些功能，这些功能将无法在代码片段编辑器中正确返回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>
-1
投票

您可以只使用div方法创建createElement()元素，然后使用innerHTML()属性将html内容推送到该div。现在，您可以使用insertAdjacentElement()方法在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.