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

Question

我正在研究 react-accessible-accordion 的代码，我不明白它是如何呈现它的 child 的。

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

这个组件接受几层嵌套的 child 。具体来说，我不明白它们是如何被传承下来的。

我可以看到该组件将其余 Prop 分布在一个自闭合 Accordion div 元素上...该机制如何设法呈现多个级别的子级？

Answer 1

react context Consumer 期望一个函数作为它的子函数来呈现内容。此示例中的该函数被引用为 this.renderAccordion :

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

在 {...rest} 中呈现子项传播属性:

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

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

...rest包括 children来自 this.props (并且您实际上可以将子项渲染为属性，例如 <div children={ <p>Hello!</p> } /> )来自解构赋值——换句话说 const { ...rest } = this.props包括 this.props.children .