![]() Be Mindful of PureComponent / shouldComponentUpdate Using children as in the previous example can avoid having to reach for more complex solutions like context, Redux, or MobX (to name just a few). Not as nice, right? Threading props down this way (aka “prop drilling”) couples the components together more than you might want – not always a bad thing, but good to be conscious of. Here’s an example of passing children to a Button component:įunction Layout ( props ) ) => ( ) React’s children prop is similar to Angular’s transclusion or Vue’s s. These elements (zero, one, or more) are made available inside that component as a prop called children. So that we’re all on the same page: React allows you to pass children to a component by nesting them inside its JSX tag. TL DR: You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable. These cases are all easy to accomplish with the “slots” pattern – a.k.a. Maybe you’re writing a NavBar with a left side and a right side that need to be dynamic. Maybe you’re creating a Layout with a header, a sidebar, and a content area. This component needs to be able to accept multiple children and place them in the layout as it sees fit – not right next to each other.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |