reactjs - 这个组件如何渲染它的子组件？

我正在研究 react-accessible-accordion 的代码，但我不理解它是如何渲染其子组件的。

来自 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>
        );
    }
}

这个组件可以接受几层嵌套的子元素。具体来说，我不明白它们是如何被传递下去的。

我可以看到组件将其余的属性展开到一个自闭合的 Accordion div 元素上……这个机制是如何管理渲染多层子元素的？

答案＃1

React 上下文 Consumer 期望其子元素是一个函数来渲染内容。在此示例中，该函数被引用为 this.renderAccordion：

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

它将子元素呈现在 {...rest} 展开属性中：

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

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

...rest 包含了来自 this.props 的 children（实际上你也可以将 children 作为属性来渲染，比如 <div children={ <p>Hello!</p> } />），这是通过解构赋值得到的 —— 也就是说 const { ...rest }=this.props 包含了 this.props.children。

答案＃2

有一个用于提供的 Provider 和一个用于渲染子组件的 Consumer，因为 props 会被展开到 Consumer 上，而 children 是 Accordian 的一个 prop。

这是正在使用的消费者

对于诸如 AccordianItem 这样的单个组件，它使用 Provider 来定义用于渲染的组件。