React TypeScript使用Context Provider遇语法错误：意外标记需逗号

可能的原因及解决方法 #

1. 检查Context的初始化是否正确 #

报错指向MapContext.Provider的点号，大概率是MapContext没有通过React.createContext正确创建。确保你的Context初始化代码符合规范：

import React from 'react';

// 先定义上下文的类型（根据业务需求调整）
type MapContextValue = {
  // 添加你的上下文属性，比如：
  // mapInstance?: Map;
  // setMapInstance?: (instance: Map) => void;
};

// 必须用React.createContext创建，同时传入符合类型的初始值
const MapContext = React.createContext<MapContextValue>({});

如果MapContext是普通对象或非Context实例，访问.Provider就会触发语法错误。

2. 用变量中转绕过JSX属性访问 #

部分旧版Babel/TypeScript配置对JSX中直接访问对象属性的语法支持不佳，可以把Provider单独提取成变量：

import React from 'react';

const MapContext = React.createContext(/* 初始值 */);
const MapContextProvider = MapContext.Provider; // 中转变量

export const MapProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
    const contextValue = { /* 你的上下文值 */ };

    return (
        <MapContextProvider value={contextValue}>
            {children}
        </MapContextProvider>
    );
};

3. 排查变量名冲突 #

确认代码中没有其他地方将MapContext重新赋值为非Context对象，比如：

// 错误示例：覆盖了原本的Context实例
const MapContext = { someKey: 'value' };

这种情况会导致.Provider不存在，触发语法错误。

4. 升级依赖（针对React Native环境） #

如果是React Native项目，检查并升级相关依赖版本：

• @types/react 和 @types/react-native 确保与当前React Native版本兼容
• @babel/preset-react 和 @babel/core 升级到支持现代JSX语法的版本

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