如何將React組件（或原始html）傳遞到其他React組件並插入它？

我有從ajax返回的原始html標記。在React中渲染原始HTML並不容易。我試圖上下使用dangerouslySetInnerHTML，但沒有發現，只有React拋出錯誤。那dangerouslySetInnerHTML是真正晦澀難懂。如何將React組件（或原始html）傳遞到其他React組件並插入它？

因此，我決定編譯我的原始html到React組件並插入它。原始html被編譯爲React組件，但我無法插入它。這是我的代碼。我想通過<Html />組件（或原始的HTML甚至會更好），以<Tr />組件作爲this.props.b：

var FooComponent = React.createClass({ 
    render: function() { 
      var Html = React.createClass({ 
       render: function() { 
        return (
         myRawHtmlMarkup 
        ); 
       } 
      }); 

     return (
      <Tr id={key} a={value} b={Html} /> 
     ); 
    } 
});

現在如何插入任何HTML或<Html />到DOM元素<td>？使用{this.props.b}不起作用。

而這裏inportant的事情是，我不能改變this.props.b到別的不便像this.props.child，this.props.children，等我需要this.props.b因爲在父母FooComponent部件的循環，我用很多if/else條件賦值this.props.b（不如上圖所示爲簡單起見）：

var Tr = React.createClass({ 
    render: function() { 
     return (
      <tr> 
       <td className="idCol">{this.props.id}</td> 
       <td className="aCol">{this.props.a}</td> 
       <td className="bCol">{this.props.b}</td> 
      </tr> 
     ); 
    } 
});

來源

2015-12-08 Green

你是怎樣嘗試使用'dangerouslySetInnerHTML'？你得到什麼錯誤？ – thgaskell

在Html組件將拋出一個錯誤，因爲一個組件需要返回一個有效的ReactComponent，而不是一個字符串的方法render。

我想你可以解析HTML和componentDidMount追加兒童：https://jsfiddle.net/4z13gp7g/

var Tr = React.createClass({ 
    componentDidMount: function(){ 
    var div = document.createElement('div'); 
    div.innerHTML = this.props.b; 
    this.refs.b.appendChild(div.firstChild) 
    }, 
    render: function() { 
     return (
      <tr> 
       <td className="idCol">{this.props.id}</td> 
       <td className="aCol">{this.props.a}</td> 
       <td className="bCol" ref="b"></td> 
      </tr> 
     ); 
    } 
}); 

ReactDOM.render(
    <Tr id="key" a="value" b="<p><strong>Hi</strong></p>" />, 
    document.querySelector('table tbody') 
);

來源

2015-12-08 13:10:20 pawel

你需要對HTML VAR一類反應？

如果沒有，試試這個：

var FooComponent = React.createClass({ 
    render: function() { 
     var Html = (myRawHtmlMarkup); 

     return (
      <Tr id={key} a={value} b={Html} /> 
     ); 
    } 
});

來源

2015-12-08 21:36:26 Allan

如何將React組件（或原始html）傳遞到其他React組件並插入它？

回答

相關問題