SharePoint：JS/TS客户端Web部件如何跨部件调用函数？

在SPFx生态里实现Web部件间的函数触发与流程链关联，主要有三种实用方案，对应不同场景：

1. 官方Web部件连接框架（推荐流程链场景） #

这是SharePoint官方提供的标准化方案，支持可视化配置连接、类型安全，非常适合结构化的流程链关联需求。

实现步骤： #

第一步：定义共享接口

先创建一个用于传递触发信号的接口：

// IFlowTrigger.ts
export interface IFlowTrigger {
  triggerType: 'start' | 'next' | 'reset'; // 触发类型
  triggerData?: any; // 附带参数
}

第二步：发送方Web部件实现「提供接口」

以流程启动器为例，配置连接并提供触发信号：

// SenderWebPart.ts
import { IFlowTrigger } from './IFlowTrigger';
import { PropertyPaneWebPartConnection, ConnectionType } from '@microsoft/sp-property-pane';

export default class SenderWebPart extends BaseClientSideWebPart<ISenderProps> {
  protected getPropertyPaneConfiguration() {
    return {
      pages: [
        {
          groups: [
            {
              groupName: "流程连接",
              groupFields: [
                // 配置连接提供方
                PropertyPaneWebPartConnection({
                  label: "关联流程节点",
                  targetProperty: "flowConnection",
                  connection: {
                    id: "flowTriggerConnection",
                    title: "流程触发信号",
                    type: ConnectionType.producer,
                    interface: IFlowTrigger,
                    method: this.provideTriggerSignal.bind(this)
                  }
                })
              ]
            }
          ]
        }
      ]
    };
  }

  // 提供触发信号的方法
  private provideTriggerSignal(): IFlowTrigger {
    // 可根据业务逻辑动态返回触发类型
    return { triggerType: 'next', triggerData: { step: 2 } };
  }

  // 示例：按钮点击触发连接更新
  private handleButtonClick() {
    this.context.propertyPane.refresh(); // 触发接收方更新
  }
}

第三步：接收方Web部件实现「消费接口」

以流程节点为例，监听连接信号并执行对应函数：

// ReceiverWebPart.ts
import { IFlowTrigger } from './IFlowTrigger';
import { PropertyPaneWebPartConnection, ConnectionType } from '@microsoft/sp-property-pane';

export default class ReceiverWebPart extends BaseClientSideWebPart<IReceiverProps> {
  protected onInit(): Promise<void> {
    // 配置连接消费方
    this.context.propertyPane.registerPropertyPaneField(
      PropertyPaneWebPartConnection({
        label: "接收流程触发",
        targetProperty: "flowConnection",
        connection: {
          id: "flowTriggerConnection",
          title: "流程触发信号",
          type: ConnectionType.consumer,
          interface: IFlowTrigger,
          onConnect: (data: IFlowTrigger) => this.handleTrigger(data),
          onDisconnect: () => console.log("流程连接已断开")
        }
      })
    );
    return super.onInit();
  }

  // 处理触发信号，执行对应业务函数
  private handleTrigger(trigger: IFlowTrigger) {
    switch(trigger.triggerType) {
      case 'start':
        this.startProcess();
        break;
      case 'next':
        this.nextStep(trigger.triggerData?.step);
        break;
      case 'reset':
        this.resetProcess();
        break;
    }
  }

  // 自定义业务函数
  private startProcess() { /* 启动流程逻辑 */ }
  private nextStep(step: number) { /* 下一步逻辑 */ }
  private resetProcess() { /* 重置流程逻辑 */ }
}

适用场景：需要结构化流程链、支持页面编辑时可视化配置连接、类型安全的复杂业务场景。

2. 全局自定义事件（适合简单触发场景） #

如果只是需要简单触发其他部件的函数，不需要可视化配置，用全局事件总线最直接，无需依赖SPFx连接框架。

实现示例： #

发送方触发事件

// SenderWebPart.ts
private handleTriggerNext() {
  // 发送自定义事件，携带参数
  window.dispatchEvent(new CustomEvent('flow-next-step', {
    detail: { step: 2 }
  }));
}

接收方监听事件

// ReceiverWebPart.ts
protected onInit(): Promise<void> {
  // 添加事件监听
  window.addEventListener('flow-next-step', this.handleNextStep.bind(this));
  return super.onInit();
}

protected onDispose(): void {
  // 销毁时移除监听，避免内存泄漏
  window.removeEventListener('flow-next-step', this.handleNextStep.bind(this));
  super.onDispose();
}

// 执行业务函数
private handleNextStep(event: CustomEvent) {
  const step = event.detail.step;
  this.nextStep(step);
}

注意：事件名称要唯一，避免与其他脚本冲突；必须在部件销毁时移除监听。

适用场景：简单的函数触发、无需可视化配置的轻量场景。

3. React Context（适合React栈Web部件） #

如果所有Web部件都是基于React开发的，可以用React Context共享状态和方法，实现部件间通信。

实现示例： #

第一步：创建全局Context

// FlowContext.tsx
import { createContext, useContext } from 'react';

interface IFlowContext {
  startProcess: () => void;
  nextStep: (step: number) => void;
  resetProcess: () => void;
}

export const FlowContext = createContext<IFlowContext | undefined>(undefined);

// 自定义Hook简化Context调用
export const useFlowContext = () => {
  const context = useContext(FlowContext);
  if (!context) throw new Error('useFlowContext必须在FlowContext.Provider内使用');
  return context;
};

第二步：提供Context（可通过隐藏Web部件实现）

// FlowProviderWebPart.tsx
import { FlowContext } from './FlowContext';

export default class FlowProviderWebPart extends BaseClientSideWebPart<IFlowProviderProps> {
  public render() {
    return (
      <FlowContext.Provider value={{
        startProcess: () => { /* 全局启动逻辑 */ },
        nextStep: (step: number) => { /* 全局下一步逻辑 */ },
        resetProcess: () => { /* 全局重置逻辑 */ }
      }}>
        {/* 隐藏部件，仅作为Context容器 */}
        <div style={{ display: 'none' }}></div>
      </FlowContext.Provider>
    );
  }
}

第三步：消费Context

// SenderComponent.tsx（发送方React组件）
import { useFlowContext } from './FlowContext';

const SenderComponent = () => {
  const { nextStep } = useFlowContext();
  return <button onClick={() => nextStep(2)}>下一步</button>;
};

// ReceiverComponent.tsx（接收方React组件）
import { useFlowContext } from './FlowContext';

const ReceiverComponent = () => {
  const { startProcess } = useFlowContext();
  return <button onClick={startProcess}>启动流程</button>;
};

适用场景：所有Web部件均为React开发、需要共享状态与方法的中大型React项目。

内容的提问来源于stack exchange，提问作者Anonymouse