Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React js equivalent for ng-include

Tags:

reactjs

i am using Reactjs. i want to include partial html in my view. something like ng-include. what is the best way doing it?

<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>
 );
}

});

like image 897
user3816824 Avatar asked Jul 08 '14 14:07

user3816824


People also ask

What is the equivalent to Ng if in react JS?

ng-if. In React, use the ternary operator ( ? ) or a logical AND ( && ).

Can we use innerHTML in React?

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element, then setting its innerHTML , you can use this property directly on the element.

Can we use ngIf in React?

In this post, we can see how we can use the traditional ngif statement in React. This post is for beginners in React. If you are an angular developer you might have used *ngIf statement. so recently I have been into react js and at a moment I wanted to use conditional rendering.

Can you React component without rendering?

TL;DR you can (and should) create React components that render nothing and use them to manage data and state in your app, in order to have components that are reusable and composable for real.


1 Answers

According to React documentation:

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

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

So for you that could be:

render: function () {
  return (
    <div id="page" className="PageContainer"
      dangerouslySetInnerHTML={{__html: this.state.page}}
     >
    </div>
 );
like image 181
Mark Bolusmjak Avatar answered Oct 19 '22 03:10

Mark Bolusmjak