我试图在我的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放在里面。我怎样才能使它发挥作用?
答案 0 :(得分: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将被保留。