Ryan Florence - Compound Components
Why Stack Overflow recommends it
Stack Overflow users link it as the go-to explanation of the compound component pattern when asking or answering React composition questions.
Recommended by 2 people across 2 different months, 2017 to 2019.
What it is
A 43-minute Phoenix ReactJS meetup recording of Ryan Florence explaining the compound components pattern in React, where parent and child components share implicit state and work together. It was recorded in November 2016 and uploaded in 2017.
What people said
Recommends Hozefa · 2017-08 · Stack Overflow · on “React Components - Extending, Customizing and reusing”
Not sure about the exact architecture but [this video] talk on compound components touches on your problems and possible solutions.
Recommends Allen · 2018-02 · Stack Overflow · on “When should I be using React.cloneElement vs this.props.children?”
In fact, React.cloneElement is not strictly associated with this.props.children . It's useful whenever you need to clone react elements( PropTypes.element ) to add/override props, without wanting the parent to have knowledge about those component internals(e.g, attaching event handlers or assigning key / ref attributes). Also react elements are immutable . React.cloneElement( element, [props], [...children] ) is almost equivalent to: <element.type {...element.props} {...props}>{children}</element.type> However, the children prop in React is especially used for containment (aka composition [LINK] ), pairing with React.Children API and React.cloneElement , component that uses props.children ca
Cites Martin Kadlec · 2018-05 · Stack Overflow · on “Using Flow.js with React compound components”
I am trying to figure out how to use Flow.js types with compound React components. [this video] For example, let's say I have component A like so: type Props = {title: string}; const A = ({title}: Props) => <span>{title}</span>; And TitleProvider like so: const TitleProvider = () => { return React.cloneElement(this.props.children, { title: 'Foo', }); }; Then I am using these two components as compound components like so: <TitleProvider> <A /> </TitleProvider> This will fail because the initial call to React.createElement will create the A component without the required title prop. I want to keep using compound components (I don't want to pass down component class or use render props). I also want
Cites GuerillaRadio · 2019-06 · Stack Overflow · on “Dependency cycle issue when using Styled Components alongside compound component pattern”
I have a few accordion components created using the compound component methodology (there is a great talk by Ryan Florence describing compound components here [this video] ). One of the ESLint rules I have setup is import/no-cycle [LINK] to prevent dependency cycles. As I'm using the compound component methodology as well as the advised way to refer to other components [LINK] in Styled Components by keeping all styles relevant to a particular component in that file itself, I am triggering the import/no-cycle warning. Here is my Accordion.js file. import React, { useState } from "react"; import AccordionTrigger from "./accordionTrigger"; import AccordionContent from "./accordionContent"; const Acc