这个组件如何渲染它的子组件？答案

【问题标题】：How does this component render its children?这个组件如何渲染它的子组件？
【发布时间】：2019-10-05 00:07:51
【问题描述】：

我正在研究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 元素上...该机制如何管理渲染多个级别的子级？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

Provider 用于提供子组件，Consumer 用于渲染子组件，因为 props 传播到 Consumer 和 children 是 Accordian 的 props。

Here is the consumer being used

对于单独的组件，例如AccordianItem，它使用Provider 来定义要渲染的组件。

【讨论】：

【解决方案2】：

This可以帮助你理解。

基本上，当 JSX 被编译成 React 代码时，它会使用：

React.createElement("div", null, children);，或
React.createElement("div", { children }, null);

在我发给你的链接中查看Hello、Foo 和Bar 组件是如何编译的。您的案例将是 Bar 组件

【讨论】：

【解决方案3】：

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 包括来自解构赋值的this.props 中的children（您实际上可以将子级渲染为属性，如<div children={ <p>Hello!</p> } />）——换句话说，const { ...rest } = this.props 包括this.props.children。

【讨论】：