Why Are Component Children Included Under Props `this.props.children` And Not Directly As `this.children`?
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
There are a couple advantages.
- 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
renderfunction (or a
DOM.render) is on the same property:
- It makes comparisons in
componentWillReceivePropssimpler, since changing
props.childrenis 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...ofloops from picking up the change.
- It reduces the component api. If
this.childrenwas used, it is one more property that the component cannot use for itself. Putting it under
props.childrenmeans only the lifecycle methods,
stateare taken by the api.
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?