Question

我试图在我的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放在里面。我怎样才能使它发挥作用？

Answer 1

如果你设置了TD innerhtml，那么你将替换它的所有内容。如果您有，其中包含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将被保留。

将内容放入内容时，dangerouslySetInnerHTML无法正常工作

1 个答案: