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>
);
}
});
ng-if. In React, use the ternary operator ( ? ) or a logical AND ( && ).
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.
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.
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.
According to React documentation:
As a last resort, you always have the ability to insert raw HTML.
<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
So for you that could be:
render: function () {
return (
<div id="page" className="PageContainer"
dangerouslySetInnerHTML={{__html: this.state.page}}
>
</div>
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With