javascript - 在 div 中添加一个 span 并使用 dangerouslySetInnerHTML 来显示工具提示

Question

有一个 div 元素，它有一个指向这样的页面集的链接：

  <a href={row.original.productURL}>
    <div className="product-sku">
      <p>{row.values.sku}</p>
      <div
        className="product-details"
        dangerouslySetInnerHTML={{
          __html: row.original.description
        }}>
      </div>
    </div>
  </a>

它工作正常，但我想在悬停时添加一个工具提示，所以我尝试在 div 内添加一个跨度：

  <a href={row.original.productURL}>
    <div className="product-sku">
      <p>{row.values.sku}</p>
      <div
        className="tooltip product-details"
        dangerouslySetInnerHTML={{
          __html: row.original.description
        }}>
        <span className="tooltiptext">This is my tooltip</span>
      </div>
    </div>
  </a>

它似乎被禁止，因为它返回错误：

未捕获的错误：只能设置children或之一props.dangerouslySetInnerHTML。

在这种情况下有没有办法添加工具提示？

Answer 1

你问的有点晚了，但是如果其他人有这个问题......你只需要简单地将你的 HTML 附加到 __html 道具。

基本上是这样的：

<div
    className="tooltip product-details"
    dangerouslySetInnerHTML={{
      __html: row.original.description
    }}>
    <span className="tooltiptext">This is my tooltip</span>
</div>

变成这样：

<div
    className="tooltip product-details"
    dangerouslySetInnerHTML={{
      __html: row.original.description + `<span class="tooltiptext">This is my tooltip</span>`
    }}>
</div>

这允许您在使用 dangerouslySetInnerHTML 属性的 div 中嵌套 div/span 类。