React dangerouslySetInnerHtml在某些情況下不起作用

我正在使用dangerouslySetInnerHtml將鏈接插入複合反應組件。 render方法調用方法rowValue，該方法檢查組件的狀態並返回要呈現的相應標記。React dangerouslySetInnerHtml在某些情況下不起作用

這是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不會改變任何東西。

來源

2015-09-28 Bhargav

您的div與'dangerouslySetInnerHtml'是自我關閉 - divs不是自我關閉。 – Tom

@Tom我在反應的網站[這裏]（https://facebook.github.io/react/tips/dangerously-set-inner-html.html）和[這裏]（https：// facebook例如.github.io/react /）（頁面上的最後一個例子）。在這兩個頁面上，帶'dangerouslySetInnerHtml'的'div'都是自閉的 – Bhargav

另外，我只是通過添加結束標記來測試它，但仍然得到相同的錯誤。 – Bhargav

我無法弄清楚爲什麼發生這種情況的確切條件，但我找到了解決方法。對於posterity's sake這裏是：

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

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

來源

2015-09-28 09:29:14 Bhargav

React dangerouslySetInnerHtml在某些情況下不起作用

回答

相關問題