reactjs – 针对ng-include的React js等价物

发布时间：2020-12-15 20:12:24 所属栏目：百科来源：网络整理

导读：我正在使用Reactjs.我想在我的视图中包含部分 HTML.像ng-include这样的东西. 这样做的最佳方式是什么？ div ng-include src="myPageUrl"/ng-include/div 我试了以下没有运气 – 得到了 'Uncaught Error: Invariant Violation: traverseAllChildren(...): Enc

我正在使用Reactjs.我想在我的视图中包含部分 HTML.像ng-include这样的东西.
这样做的最佳方式是什么？

<div>
    <ng-include src="myPageUrl"></ng-include>
</div>

我试了以下没有运气 – 得到了

'Uncaught Error: Invariant Violation: traverseAllChildren(...): 
Encountered an invalid child; 
DOM elements are not valid children of React components'

我的代码看起来像这样(基于http://benalpert.com/react/tips/initial-ajax.html)

var PageContainer = React.createClass({
  getInitialState: function() {
   return {
    page: "loading page ..." 
   };
  },componentDidMount : function(){
   $.get(url,function(result) {
   var data = result;
   this.setState({
    page: data
   });
  }.bind(this));
 },render: function () {
  return (
    <div id="page" className="PageContainer">
        {this.state.page}
    </div>
 );
}

});

解决方法

根据 React documentation：

As a last resort,you always have the ability to insert raw HTML.

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

所以对你来说可能是：

render: function () {
  return (
    <div id="page" className="PageContainer"
      dangerouslySetInnerHTML={{__html: this.state.page}}
     >
    </div>
 );

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!