Js response is equivalent for ng-include

I am using Reactjs. I want to include partial html in my opinion. something like ng-include. What is the best way to do this?

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

I tried the following with no luck - got

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

my code looks like this (based on 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>
 );
}

});

+4
source share
1 answer

In accordance with Respond to documentation :

As a last resort, you always have the option to embed raw HTML.

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

So for you, this could be:

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

Source: https://habr.com/ru/post/1547605/


All Articles