危险的setlynerHtml在某些条件下无效

时间:2015-09-28 07:40:17

标签: javascript reactjs

我正在使用def myfunction(callback=myfun): files = whatever() for f in files: callback(f, temp=True) 将链接插入到复合反应组件中。 dangerouslySetInnerHtml方法调用方法render,该方法检查组件的状态并返回要呈现的相应标记。

这是rowValue方法:

rowValue

在初始渲染时,div的内容为空:

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 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> 状态设置为false会呈现空div。

editdiv道具包裹在另一个dangerouslySetInnerHtml内并不会改变任何内容。

1 个答案:

答案 0 :(得分:2)

我无法弄清楚为什么会发生这种情况的确切条件,但我找到了解决方法。对于posterity's sake,这是:

我想用特定链接填充div。不是通过dangerouslySetInnerHtml传递带锚标记的字符串,而是通过URL并设置锚标记的href属性。

  fieldValue = (
      <div className="col-sm-6 col-xs-6">
         <a href="{this.props.url}">{this.props.url}</a>
      </div>
    );