How to render whole tree from within React component?

Question

I'm building a higher-order component, and I'd like it to render out all of the composed component's children, and their children, all the way down the line.

When I call render(), though, it only renders the component's children, not their children's children.

How do I render it all the way down?

Here's some code:

export default ComposedComponent => {
  class HoC extends ComposedComponent {
    render() {
      console.log(super.render())
    }
  }

  return HoC
}

David L. Walsh · Accepted Answer · 2016-02-20 06:18:35Z

1

You never call render manually. Render is automatically called upon initialisation, and every time the props and state change. And when render is called on an element, it is also called on all its child elements.

Additionally, don't use inheritance. React components extend React.Component, they never extend other components.

answered Feb 20, 2016 at 6:18

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tucker Connelly Over a year ago

Hmmmmmmm I'm doing some pretty intense sh*t (basically making a better version of Radium that works with react-native), so I think this might be an exception to never calling render. I'd like to render the entire tree of components and get all of their style properties and then process them, but render only goes one-level deep.

Jake Haller-Roby Over a year ago

Render goes all the way down the tree, but the benefit of React is that it doesn't needlessly re-render things that have not changed. If you're seeing that items are not re-rendering, it means that they should display the same thing so there was no need to render. If for whatever reason you need them to render at specific times, then React is probably a bad choice, as you're actively going out of your way to undo the main thing that makes it special.

Collectives™ on Stack Overflow

How to render whole tree from within React component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related