Question

我正在研究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>
        );
    }
}

此组件接受几个级别的嵌套子级。具体来说，我不明白它们是如何被传递的。

我可以看到该组件将其余的props散布在一个自动闭合的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的{{1}}（您实际上可以将子代渲染为属性，例如this.props），也就是{{{ 1}}包含<div children={ <p>Hello!</p> } />。

Answer 2

有Provider用于提供子组件，而Consumer用于呈现子组件，因为道具散布到Consumer并且children是Accordian的道具

Here is the consumer being used

对于AccordianItem之类的单个组件，它使用Provider来定义要渲染的组件。

Answer 3

This可以帮助您理解。

基本上，当JSX编译为React代码时，它使用以下方法创建组件：

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

检查如何在我发送给您的链接中编译Hello，Foo和Bar组件。您的案子将成为Bar的组成部分

此组件如何呈现其子级？

3 个答案: