If I have the following HTML:

<div id="myreactponent">
  <h1>Headline</h1>
  <p>Content</p>
</div>

And I initialize a ReactJS Component into the #myreactponent div, can I somehow render the h1 and the p element inside the ponent? Something like that:

return (
  <Header></Header>
  { place h1 and p here }
  <Footer></Footer>
);

Is there an option for that in ReactJS?

You can check this JSFiddle to see a demonstration of my problem.

For people familiar with Angular: I search the transclude option and the <ng-transclude/> tag of an AngularJS directive in React.

For people familiar with Polymer: I search the equivalent of the <content/> tag in React.

UPDATE

I tried the this.props.children property, but as far as I understand, this only works if the initial HTML is already in an React ponent. I really need to render the children of the element that I initially render the first React ponent into.

UPDATE 2

To move the HTML into the initialization of the ponent (as shown in the update of the JSFiddle) is not an option in my case, due to different systems which render the initial HTML and the React ponents.

If I have the following HTML:

<div id="myreactponent">
  <h1>Headline</h1>
  <p>Content</p>
</div>

And I initialize a ReactJS Component into the #myreactponent div, can I somehow render the h1 and the p element inside the ponent? Something like that:

return (
  <Header></Header>
  { place h1 and p here }
  <Footer></Footer>
);

Is there an option for that in ReactJS?

You can check this JSFiddle to see a demonstration of my problem.

For people familiar with Angular: I search the transclude option and the <ng-transclude/> tag of an AngularJS directive in React.

For people familiar with Polymer: I search the equivalent of the <content/> tag in React.

UPDATE

I tried the this.props.children property, but as far as I understand, this only works if the initial HTML is already in an React ponent. I really need to render the children of the element that I initially render the first React ponent into.

UPDATE 2

To move the HTML into the initialization of the ponent (as shown in the update of the JSFiddle) is not an option in my case, due to different systems which render the initial HTML and the React ponents.

• javascript
• reactjs
• angularjs-ng-transclude

• Did you try anything..? – Moid Commented Mar 11, 2016 at 9:18
• @MoidMohd I tried this.props.children which does something simliar but only if you are inside a ponent already. I updated my question with a JSFiddle to explain it better. Thanks. – Tim Roes Commented Mar 11, 2016 at 9:31
• Do yo have some html content to be "inserted" into your JSX..? Something like a string of html inside your code...? – Moid Commented Mar 11, 2016 at 9:57
• @MoidMohd I guess that's what I mean. I have some html, which is rendered to the HTML file and I need to add this as children inside my ponent. I added a JSFiddle in the question, which illustrates the problem. – Tim Roes Commented Mar 11, 2016 at 10:00

3 Answers 3

Something like this...

..
render(){
return (
<Header></Header>
<span dangerouslySetInnerHTML={{__html:'content'}}></span>
<Footer></Footer>
)
}
..
var content = '<h1>This is a header</h1><p>This is some para..</p>'

Is this what you are referring... You can read more about this here.

Yes, to do this use this.props.children.

For example, if you had a React ponent used like this:

<MyReactComponent>
  <h1>Headline</h1>
  <p>Content</p>
</MyReactComponent>

You can transfer the child elements h1 and p, by doing this in the render of MyReactComponent:

return (
  <Header></Header>
  { this.props.children }
  <Footer></Footer>
);

Yes this is possible.

In the react class you have this.props.children

So in the parent ponent:

function render() {
  return <MyComponent><div class="my-child">My text</div></MyComponent>;
}

Then in the child ponent

function render() {
  return <div class="child-wrapper">{this.props.children}</div>;
}

https://facebook.github.io/react/tips/children-props-type.html