React中<td>内用dangerouslySetInnerHTML加子元素时表格行不显示

嘿，我碰到过这个问题！问题出在dangerouslySetInnerHTML的工作机制上——它会完全替换掉目标元素内部的所有内容，包括你在<td>标签里手动写的那些评论区<div>子元素。所以你写的评论组件根本没机会被React渲染，甚至可能因为DOM结构被意外篡改，导致整个表格行无法正常显示。

下面是两种可行的解决思路：

1. 拆分结构（推荐） #

不要把dangerouslySetInnerHTML直接用在<td>上，而是用一个内部容器来承载HTML内容，把自定义子元素放在同一个<td>中单独的位置。这样两者互不干扰，都能正常渲染：

<td>
  {/* 用单独的div承载innerHTML内容 */}
  <div dangerouslySetInnerHTML={{ __html: item.words }} />
  {/* 你的评论区元素正常写在这里 */}
  <div className={commentClassName}>
    <div className="comments-item">
      <div className="comments-item-dp"></div>
      <div className="comments-item-text">
        <span>APURV</span> Delete the marked words from this part
      </div>
    </div>
  </div>
</td>

这种方式结构更清晰，能避免不必要的DOM冲突，同时也能降低XSS风险——因为你只把可信的HTML内容限制在单独的容器里。

2. 合并HTML字符串（仅当必要时使用） #

如果你必须把innerHTML内容和评论区放在同一个容器里，那可以把评论区的HTML字符串和item.words拼接在一起，统一传给__html：

// 先把评论区的HTML转成字符串（注意要确保内容可信，避免XSS）
const commentHtml = `
  <div class="${commentClassName}">
    <div class="comments-item">
      <div class="comments-item-dp"></div>
      <div class="comments-item-text">
        <span>APURV</span> Delete the marked words from this part
      </div>
    </div>
  </div>
`;

// 拼接两个HTML字符串
const combinedHtml = item.words + commentHtml;

// 渲染到td里
<td dangerouslySetInnerHTML={{ __html: combinedHtml }} />

⚠️ 注意：这种方式要格外小心XSS攻击，必须确保item.words和你拼接的评论区内容都是完全可信的，否则可能引入安全风险。

最后再提个小建议：如果item.words只是纯文本，完全没必要用dangerouslySetInnerHTML，直接写<td>{item.words}</td>就行，只有当内容是HTML字符串时才需要用到这个属性。

内容的提问来源于stack exchange，提问作者EdG