ESLint未识别Context导出的Provider/Consumer，如何修复？

报错原因 #

你在myContext.js中默认导出了React.createContext()返回的上下文对象，但在wrapper.jsx里使用了命名导入语法import { Provider, Consumer } from './myContext'。

ESLint的import/named规则会严格检查：你导入的命名成员是否是目标模块中明确导出的命名项。而Provider和Consumer是默认导出上下文对象的属性，并非模块独立的命名导出，所以ESLint判定这两个成员不存在，抛出错误。

解决办法 #

方法一：修改myContext.js的导出方式，新增命名导出 #

直接在myContext.js里把Provider和Consumer作为命名成员导出：

import React from 'react';
const MyContext = React.createContext();

// 新增命名导出
export const Provider = MyContext.Provider;
export const Consumer = MyContext.Consumer;

export default MyContext;

这样wrapper.jsx里的原有命名导入语法就合法了，ESLint检查会通过。

方法二：修改wrapper.jsx的导入逻辑，从默认导出对象中访问属性 #

保留myContext.js的原有代码，修改wrapper.jsx的导入方式：

import React from 'react';
// 先默认导入整个上下文对象
import MyContext from './myContext';

export const MyProvider = MyContext.Provider;

export const Wrapper = (Component) => {
  const Wrapper = props => (
    // 直接通过上下文对象访问Consumer
    <MyContext.Consumer>
      {value => <Component {...props}/>}
    </MyContext.Consumer>
  );
  return Wrapper;
};

这种方式不需要改动原上下文模块，通过默认导入的对象直接访问属性，ESLint不会再触发import/named错误。

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