面试题：Svelte使用context="module"实现复杂场景通信

Question

假设有一个多层嵌套的组件结构，顶层组件需要与深层嵌套的某个子组件进行通信，同时中间层组件也可能会对这个通信数据有一定的处理需求。请详细说明如何使用`context="module"`来优雅地实现这种复杂场景下的组件间通信，并给出相应的代码示例，包括模块的定义、数据传递和接收处理。

Answer 1

1. 模块定义

首先，创建一个用于管理上下文的模块文件，例如 contextModule.js。

// contextModule.js
import { createContext } from 'react';

// 创建上下文
const MyContext = createContext();

// 数据处理函数
function dataProcessor(data) {
    // 这里可以进行中间层需要的处理，例如数据转换、过滤等
    return data.toUpperCase();
}

export { MyContext, dataProcessor };

2. 顶层组件数据传递

在顶层组件中，通过 MyContext.Provider 来传递数据。

import React from'react';
import { MyContext, dataProcessor } from './contextModule';

function TopLevelComponent() {
    const dataToPass = 'hello world';
    return (
        <MyContext.Provider value={{ data: dataToPass, processor: dataProcessor }}>
            {/* 中间层及深层嵌套组件 */}
        </MyContext.Provider>
    );
}

export default TopLevelComponent;

3. 中间层组件处理（可选）

如果中间层组件需要对数据进行处理，可以通过 MyContext.Consumer 获取数据并处理后再传递。

import React from'react';
import { MyContext } from './contextModule';

function MiddleLevelComponent() {
    return (
        <MyContext.Consumer>
            {({ data, processor }) => {
                const processedData = processor(data);
                return (
                    <MyContext.Provider value={{ data: processedData, processor }}>
                        {/* 深层嵌套组件 */}
                    </MyContext.Provider>
                );
            }}
        </MyContext.Consumer>
    );
}

export default MiddleLevelComponent;

4. 深层嵌套子组件接收处理

深层嵌套的子组件通过 MyContext.Consumer 来接收并处理数据。

import React from'react';
import { MyContext } from './contextModule';

function DeepNestedComponent() {
    return (
        <MyContext.Consumer>
            {({ data }) => (
                <div>{`Received data: ${data}`}</div>
            )}
        </MyContext.Consumer>
    );
}

export default DeepNestedComponent;

这样就通过 context="module" 优雅地实现了多层嵌套组件间的通信，中间层组件可以按需对数据进行处理。