如何在WebPart的TS文件中使用Context Provider？状态传递异常求助

1. 正确创建 Context 对象 #

先确保 Context 定义时设置合理默认值，明确数据类型，避免未提供 Provider 时出现 null 报错：

// src/contexts/MyDataContext.tsx
import { createContext, useContext, ReactNode, useState } from 'react';

// 定义上下文数据类型
type MyDataType = {
  data: any; // 替换为你的实际数据类型
  setData: (data: any) => void;
};

// 创建Context并传入默认值
const MyDataContext = createContext<MyDataType>({
  data: null,
  setData: () => {}
});

// 封装Provider组件，包含状态逻辑
export function MyDataProvider({ children, initialData }: { children: ReactNode; initialData?: any }) {
  // 用WebPart传入的初始值或null初始化状态
  const [data, setData] = useState<any>(initialData || null);

  return (
    <MyDataContext.Provider value={{ data, setData }}>
      {children}
    </MyDataContext.Provider>
  );
}

// 自定义Hook简化消费逻辑
export function useMyData() {
  return useContext(MyDataContext);
}

2. 在 WebPart 入口（.ts 文件）中包裹 Provider #

WebPart 的 .ts 文件是 React 组件的渲染入口，需通过 React.createElement 将 Provider 包裹根业务组件，而非直接在 .ts 中写 JSX：

// src/MyWebPart.ts
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import MyWebPartComponent from './components/MyWebPartComponent';
import { IMyWebPartProps } from './IMyWebPartProps';
import { MyDataProvider } from './contexts/MyDataContext';

export default class MyWebPart extends BaseClientSideWebPart<IMyWebPartProps> {
  public render(): void {
    const element = React.createElement(
      MyDataProvider,
      {
        // 可传入WebPart上下文数据作为初始值，比如网站标题
        initialData: this.context.pageContext.web.title
      },
      React.createElement(MyWebPartComponent, {
        description: this.properties.description
      })
    );

    ReactDom.render(element, this.domElement);
  }

  // 其他WebPart生命周期方法、属性面板配置...
}

3. 消费 Context 数据（处理 null 状态） #

在子组件中使用自定义 Hook 消费数据，同时处理数据未加载完成的情况：

// src/components/ChildComponent.tsx
import { useMyData } from '../contexts/MyDataContext';

export default function ChildComponent() {
  const { data, setData } = useMyData();

  // 处理data为null的场景，比如显示加载状态
  if (!data) {
    return <div>Loading data...</div>;
  }

  return (
    <div>
      <p>Context Data: {JSON.stringify(data)}</p>
      <button onClick={() => setData('Updated context data')}>Update Data</button>
    </div>
  );
}

4. 常见问题排查 #

• 状态变量为 null：检查 Provider 的 value 是否正确传入 data 和 setData，同时确认初始状态是否设置了合理默认值，或在消费组件中做 null 处理。
• WebPart 的 .ts 文件无法添加组件：WebPart 的 .ts 是类文件，需通过 React.createElement 创建组件树，不能直接写 JSX 语法。
• 无路由场景下的 Context 使用：Context 基于组件树层级传递，和路由无关，只要需消费数据的组件被 Provider 包裹即可正常使用。

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