[英]React dangerouslySetInnerHtml not working in certain conditions
我使用dangerouslySetInnerHtml
将链接插入复合反应组件。 render
方法调用方法rowValue
,该方法检查组件的状态并返回要呈现的相应标记。
这是rowValue
方法:
rowValue: function() {
var fieldValue;
if(!this.state.isBeingEdited) {
fieldValue = (
<div dangerouslySetInnerHtml={{ __html: this.props.value }} />
);
} else {
fieldValue = (
<div className="col-sm-6 col-xs-6 js-field-wrapper">
<input type="text"
defaultValue={this.extractUrl(this.props.value)}
className="form-control" />
</div>
);
}
return fieldValue;
},
在初始渲染时,div的内容为空:
<div class="col-sm-6 col-xs-6" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1"></div>
但是当组件的edit
状态设置为true
,输入将正确填充正确的值:
<div class="col-sm-6 col-xs-6 js-field-wrapper" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1">
<input type="text" class="form-control" value="https://example.com" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1.0">
</div>
将edit
状态设置为false会呈现空div。
包裹div
与dangerouslySetInnerHtml
另一个里面的道具div
不会改变任何东西。
我无法弄清楚为什么会发生这种情况的确切条件,但我找到了解决方法。 为了后人的缘故,这里是:
我想用特定的链接填充div。 我没有通过dangerouslySetInnerHtml
传递带有锚标签的字符串,而是传递了URL并设置了锚标记的href
属性。
fieldValue = (
<div className="col-sm-6 col-xs-6">
<a href="{this.props.url}">{this.props.url}</a>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.