[英]DangerouslySetInnerHtml() showing content from previous page in React
Building a site which shows users profiles. 建立一个显示用户个人资料的网站。 When changing from one profile to another, the profile description is getting stuck with the previous users profile data.
当从一个配置文件更改为另一个配置文件时,配置文件描述将卡在先前的用户配置文件数据中。
For example 例如
User profile 1 description
User profile 1 description
User profile 1 description User profile 2 description
User profile 1 description User profile 2 description
My code is all being run in the render function of my component so should be rerendering when state updates. 我的代码全部在组件的render函数中运行,因此在状态更新时应重新渲染。
render(){
return(
<h4>Profile 1<h4>
<p dangerouslySetInnerHTML={{__html: this.props.profile.description}} />
)
}
Turns out this.props.profile.description
was HTML wrapped in <p>
tags. 原来
this.props.profile.description
是HTML包装在<p>
标记中的。 This was causing p
tags to be nested within p
tags which causes issues as described in this post - Nesting <p> won't work while nesting <div> will? 这导致
p
标签嵌套在p
标签内,这引起了本文中所述的问题- 嵌套<p>无法工作,而嵌套<div>可以吗?
Rule of thumb is never use dangerouslySetInnerHTML on a <p>
tag. 经验法则永远不要在
<p>
标记上危险地使用SetInnerHTML。
Took me a long time to get to the root cause of this and thought it was worth passing it on. 花了我很长时间才找到这个问题的根本原因,并认为值得将其继续下去。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.