The forthcoming techniques have no such restriction. If you want to put those two components in separate places, then the children prop is not the right choice. To take a break from the kitchen metaphor, imagine that you want to compose a “meeting” component with both “title” and “date” components. On top of non-blendability, the children prop has another major drawback: you have only one to work with per component. A blender does not simply place tomato, onion, and chiles into a div it transforms them into salsa! We either put it somewhere, or we exclude it entirely. When we use React’s children prop, we cannot modify the children. Of course, you could copy and paste the parent component and change “Smoothie” to “Breadcrumbs,” but that is the rework we want to avoid. Please do not put bread in a blender, then tell me it’s a smoothie! If we replaced our “Banana” child component with a “Sourdough” one, it would not make sense. Our parent component only makes smoothies. Can’t fit ‘em in a blender.” Children don’t blend. To paraphrase someone important in my upbringing, “Kids. We could even replace our child with a new component to meet new requirements. This might seem too simple to satisfy the lofty ideals of composition, but it does! All you need is two components to fit together. The above example code produces this: Banana Smoothie! To use the prop, simply nest the components in their JSX form. The children prop is the default built-in React technique for composing components. In React, children are unavoidable–and not very flexible. So, can we make React components as robust and flexible as blenders? Can we make a component that does its job well and works together with a diverse set of other components? Let’s look at some techniques for how React components can compose. Surely such a successful, simple machine has a lesson or two for us. This year marks 100 years since the blender’s first patent, and it remains a staple for kitchens from small homes to big restaurants. Fill it with diverse ingredients, and you can make smoothies, soups, salsas, sorbets, and so much more. What comes out of the blender depends on what you put inside. The blender itself does just one thing: it spins blades inside a container. To build an intuition for composition, think of a blender. A little intuition is enough for our purpose. However, this article explores specific techniques of composition with React components, not a scientific analysis of the whole field. As if that were not enough, the entire subfield of Design Patterns and the famous, big book of the same name are all about techniques of composition. But when those needs change, you might find yourself throwing out good work or spelunking on a giant refactoring mission! Some investigation might yield dividends.Ĭomposition is the fancy word for “how stuff fits together.” Composition is such a big topic in the fields of Software Engineering and Computer Science that it has two extensive Wikipedia entries: Object Composition and Function Composition. Maybe you’ve already made solid components that meet your project’s needs today. How do we make React components that fit together both now and in the future? A good answer can prevent a lot of rework and heartache.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |