reactjs - Kuinka tämä komponentti renderöi lapsensa?

Opiskelen react-accessible-accordionin koodia, enkä ymmärrä, miten se renderöi lapsensa.

Tiedostosta Accordion.tsx:

export default class Accordion extends React.Component<AccordionProps> {
    // ... defaults


    renderAccordion = (accordionContext: AccordionContext): JSX.Element => {
        const {
            preExpanded,
            allowMultipleExpanded,
            allowZeroExpanded,
            onChange,
            ...rest
        } = this.props;

        return <div data-accordion-component="Accordion" {...rest} />;
    };

    render(): JSX.Element {
        return (
            <Provider
                preExpanded={this.props.preExpanded}
                allowMultipleExpanded={this.props.allowMultipleExpanded}
                allowZeroExpanded={this.props.allowZeroExpanded}
                onChange={this.props.onChange}
            >
                <Consumer>{this.renderAccordion}</Consumer>
            </Provider>
        );
    }
}

Tämä komponentti hyväksyy muutaman tason sisäkkäisiä lapsia. Tarkemmin sanottuna, en ymmärrä, miten ne välitetään alaspäin.

Voin nähdä, että komponentti levittää loput propsit itse sulkeutuvaan Accordion-div-elementtiin... Miten tuo mekanismi onnistuu renderöimään useita lapsitasoja?

Vastaus #1

React-konteksti Consumer odottaa funktiota lapsenaan sisällön renderöimiseksi. Tässä esimerkissä tätä funktiota viitataan nimellä this.renderAccordion:

<Consumer>{this.renderAccordion}</Consumer>

Mikä renderöi lapset {...rest} levitysattribuuteissa:

        const {
            preExpanded,
            allowMultipleExpanded,
            allowZeroExpanded,
            onChange,
            ...rest
        } = this.props;

        return <div data-accordion-component="Accordion" {...rest} />;

Koodi ...rest sisältää children-elementit this.props-kohteesta (ja voit itse asiassa renderöidä children-elementtejä attribuuttina, kuten <div children={ <p>Hei!</p> } />) purkamisassignmentin yhteydessä -- toisin sanoen const { ...rest }=this.props sisältää this.props.children.

Vastaus #2

On Provider tarjoamaan ja Consumer renderöimään lapsikomponentteja, koska propsit levitetään Consumeriin ja children on Accordiann prop.

Tässä käytetään kuluttajaa

Yksittäisille komponenteille, kuten AccordianItem, tämä käyttää Provider-komponenttia määrittämään komponentit, jotka on tarkoitettu renderoitaviksi.