Ad

Why Are Component Children Included Under Props `this.props.children` And Not Directly As `this.children`?

- 1 answer

I'm new to React, and it seems to me that children components are distinct from props. From a framework design perspective, is there an advantage to having children included among this.props?

Ad

Answer

There are a couple advantages.

  1. It keeps everything that the component receives under props. This is a cognitive load issue; anything send to a component that is defined by its parent's render function (or a DOM.render) is on the same property: props.
  2. It makes comparisons in componentWillReceiveProps simpler, since changing props.children is not a change to state, but will result in a component re-rendering. Having to look at newPropsand some other property could easily confuse developers, and stops simple property enumeration, like for...of loops from picking up the change.
  3. It reduces the component api. If this.children was used, it is one more property that the component cannot use for itself. Putting it under props.children means only the lifecycle methods, props, setState and state are taken by the api.
Ad
source: stackoverflow.com
Ad