Is it possible to translate the children of the source element in ReactJS?

Question

If I have the following HTML:

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

And I initialize the ReactJS component in the #myreactcomponent div, can I somehow display the h1 and p-element inside the component? Something like that:

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

Is there an option for this in ReactJS?

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

For people familiar with Angular : I am looking for the forwarding option and the <ng-transclude/> of the AngularJS directive in React.

For people familiar with Polymer : I'm looking for the equivalent of a <content/> in React.

UPDATE

I tried the this.props.children property, but as I understand it, this only works if the source HTML is already in the React component. I really need to display the children of the element from which I first represent the first React component.

UPDATE 2

To move HTML into component initialization (as shown in the JSFiddle update ), in my case this is not an option, due to the different systems that display the original HTML and React components.

Answer 1

Something like that...

 .. 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>' 

This is what you are talking about ... Read more about it here .

Answer 2

Yes, use this.props.children for this.

For example, if you had a React component, for example:

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

You can pass the children of h1 and p by doing this in render from MyReactComponent :

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

Answer 3

Yes it is possible.

In the reaction class you have this.props.children

So, in the parent component:

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

Then in the child component

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

https://facebook.imtqy.com/react/tips/children-props-type.html