Can I transclude the children of the original element in ReactJS?

Question

If I have the following HTML:

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

And I initialize a ReactJS Component into the #myreactcomponent div, can I somehow render the h1 and the p element inside the component? 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 component. I really need to render the children of the element that I initially render the first React component into.

UPDATE 2

To move the HTML into the initialization of the component (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 components.

Another

Did you try anything..? – Republican

@MoidMohd I tried this.props.children which does something simliar but only if you are inside a component already. I updated my question with a JSFiddle to explain it better. Thanks. – Another

Do yo have some html content to be "inserted" into your JSX..? Something like a string of html inside your code...? – Republican

@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 component. I added a JSFiddle in the question, which illustrates the problem. – Another

Answer 1

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.

Republican

If there is no "clean" way like in Angular or Polymer for this, then yeah this seems to look like what I need. Only question would be, how to I "cleanly" retrieve the HTML to dangerously insert there (because it still is rendered in the original HTML)? Would I just get the element by id or so cut it out of the original page and insert it into the component? – Another

You can do it by getElementById... or create a module with data then import it in your jsx file. – Republican

I mark this one as correct as it seems there is no "clean" solution. Perhaps you could also add the jsfiddle of @user3338229 to your solution? jsfiddle.net/6hshvsco/5 – Another

You already mentioned the fiddle..so I guess there is no need.. :D. – Republican

Answer 2

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

For example, if you had a React component 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>
);

Romie

this.props.children only works for the HTML inside the component. I updated my question with a JSFiddle to make it more clear. Sorry. – Another

Answer 3

Yes this is possible.

In the react 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.github.io/react/tips/children-props-type.html

Cargile

this.props.children only works for the HTML inside the component. I updated my question with a JSFiddle to make it more clear. Sorry. – Another

this is unfortunately not what I want. I need to transclude HTML that is in the initial HTML on which I initialize (because of the architecture in that system, this HTML comes from another system, and only that system knows the HTML to render as children. The system initializing React components doesn't know that HTML anymore.) – Another

Then you're not going to achieve that with reactjs. React JS knows nothing about what's outside the top level component. – Cargile

ReactJS has an event called componentdidmount. I'd suggest using JQuery to move the outside elements inside the component within this method. – Cargile

I've now update the fiddle again to import the components external to react. jsfiddle.net/6hshvsco/5 – Cargile