javascript - 将内容放入<td>内时，<td>中的危险地设置InnerHTML不起作用

我正在尝试在我的React项目中危险地使用SetInnerHTML。我在桌子上使用它。我也想在td内放置一些。

执行此操作时未显示表格行

<td 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 className="comments-item">
        <div className="comments-item-dp">
        </div>
        <div className="comments-item-text">
            <span>APURV</span>
            Mute this when aired at prime time.
        </div>
    </div>
    <div className="comments-item">
        <div className="comments-item-dp">
        </div>
        <div className="comments-item-text">
            <span>ROHAN</span>
            <textarea className="form-control" placeholder="Add comment ..."></textarea>
        </div>
    </div>
</div>

但是当我这样做时它起作用

<td dangerouslySetInnerHTML={{ __html: item.words}}></td>

我想在里面放那个div。我该如何运作？

最佳答案

如果设置TD innerhtml，则将替换其所有内容。可以说，如果其中有一个div，它将被新内容替换。

解决此问题的简单方法是将div应用于td中的动态内容：

<td>
<div dangerouslySetInnerHTML={{ __html: item.words}}></div>
<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 className="comments-item">
        <div className="comments-item-dp">
        </div>
        <div className="comments-item-text">
            <span>APURV</span>
            Mute this when aired at prime time.
        </div>
    </div>
    <div className="comments-item">
        <div className="comments-item-dp">
        </div>
        <div className="comments-item-text">
            <span>ROHAN</span>
            <textarea className="form-control" placeholder="Add comment ..."></textarea>
        </div>
    </div>
</div>
</td>

这样，第二个div将被管理。