Ad

Render ReactJs Dynamic Content In Fixed Layout

- 1 answer

I'm new in ReactJs and I don't know if I "thinking in the React way". This is my scenario:

I have a Header component and a Body content. And I have a Layout component that render header and body. This is the fixed structure.

So I have a Dashboard component, but I need render the Dashboard inside the body component. And that's my problem, I don't know how to render the Dashboard component =/

Can someone help me?

Ad

Answer

You can achieve nested, dynamic child components in React by using this.props.children.

If I understand correctly your app has the following structure:

<div>
  <Header />
  <Body />
</div>

You can nest components deeper than one level, so changing the above to

<div>
  <Header />
  <Body>
    <Dashboard />
  </Body>
</div>

allows you to render the Dashboard component (and/or whatever else is nested inside the <Body> tags) by writing {this.props.children} inside the Body component's render function.

You can use a conditional and render the wanted child component by using this technique.

You can read more about nested child components here.

Ad
source: stackoverflow.com
Ad