javascript - 将内容放入 中时， 中的angerlySetInnerHTML 不起作用

Question

我正在尝试在我的 React 项目中使用危险的危险SetInnerHTML。我在我的 table 上使用它。我想在 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 放入其中。我怎样才能让它发挥作用？

Answer 1

如果您设置 TD insidehtml，您将替换其所有内容。比如说，如果里面有一个 div，它将被新内容替换。

解决这个问题的简单方法是为 td 中的动态内容应用一个 div:

<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将被保留。