React Context在CodeSandBox中运行报错求助

这个错误我之前帮好几个开发者排查过，结合你用的React 16.3和Wes Bos的示例代码，大概率不是CodeSandbox的配置锅，而是几个容易踩的小坑，咱们一步步来捋：

1. 检查Context的创建与Provider的导出/导入 #

React 16.3刚引入createContext API，很多人容易在导出组件时搞混默认导出和命名导出。比如如果你的MyProvider是默认导出的：

export default class MyProvider extends React.Component {
  // ... render逻辑
}

但你在导入的时候用了命名导入：

import { MyProvider } from './MyProvider';

这就会导致MyProvider变成undefined或者一个奇怪的对象，触发这个错误。反过来也是一样的，命名导出要对应命名导入。

2. 检查MyProvider的render方法返回值 #

错误提示明确指向MyProvider的render方法，你要确保它返回的是一个合法的React元素，而不是直接返回一个对象。比如正确的写法应该是：

class MyProvider extends React.Component {
  state = {
    // 你的上下文数据
  };

  render() {
    // 必须用Context.Provider包裹子元素，并且传递value
    return (
      <MyContext.Provider value={{ ...this.state, /* 方法 */ }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

如果你的render里直接返回了this.state或者一个普通对象，那肯定会报错——React需要的是组件或DOM元素，不是纯对象。

3. 确认CodeSandbox的React版本确实是16.3 #

虽然你说设置了16.3，但有时候CodeSandbox的依赖管理可能会有缓存。你可以去左侧的"Dependencies"面板，搜索react和react-dom，确认它们的版本号确实是16.3.x（比如16.3.2）。如果不是，手动修改版本号并重新安装。

4. 检查Babel配置（针对JSX） #

React 16.3不需要特别的Babel配置，但如果你的CodeSandbox用了旧的Babel预设，可能会导致JSX转换出问题。你可以去左侧的"Settings"面板，查看"Babel"选项，确保用的是@babel/preset-react或者官方的React预设，没有额外的冲突配置。

最后排查步骤 #

如果以上都没问题，建议你把MyProvider的代码简化到最基础的版本测试：

import React from 'react';

const MyContext = React.createContext();

class MyProvider extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{ test: 'hello' }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export { MyProvider, MyContext };

然后在根组件里这样用：

import { MyProvider } from './MyProvider';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <MyProvider>
    <div>Test</div>
  </MyProvider>,
  document.getElementById('root')
);

如果这个简化版本能运行，那说明你原来的代码里有某个细节写错了（比如状态更新逻辑、方法绑定之类的），而不是配置问题。

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