危險的setlynerHtml在某些條件下無效

Question

我使用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不會改變任何東西。

Answer 1

我無法弄清楚為什么會發生這種情況的確切條件，但我找到了解決方法。 為了后人的緣故，這里是：

我想用特定的鏈接填充div。 我沒有通過dangerouslySetInnerHtml傳遞帶有錨標簽的字符串，而是傳遞了URL並設置了錨標記的href屬性。

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