Javascript React JS:未导出组件

我的项目有以下文件夹结构：-

import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import { store } from "./GlobalStorage/store";
import   {GlobalProvider,GlobalConsumer} from "./GlobalStore";
function App() {
  return (
    <div className="App">
      <GlobalProvider value={store}> 
     <Login></Login>
     </GlobalProvider>
    </div>
  );
}

export default App;

Failed to compile.

./src/App.js
Attempted import error: 'GlobalProvider' is not exported from './GlobalStore'.

在GlobalStore.js中，我有代码->

import React from 'react'

const GlobalContext=React.createContext();
const GlobalProvider=GlobalContext.Provider;
const GlobalConsumer=GlobalContext.Consumer;


export default {GlobalProvider,GlobalConsumer}

在App.js中，我有以下代码-

import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import { store } from "./GlobalStorage/store";
import   {GlobalProvider,GlobalConsumer} from "./GlobalStore";
function App() {
  return (
    <div className="App">
      <GlobalProvider value={store}> 
     <Login></Login>
     </GlobalProvider>
    </div>
  );
}

export default App;

Failed to compile.

./src/App.js
Attempted import error: 'GlobalProvider' is not exported from './GlobalStore'.

---

您正在将属性为

GlobalProvider

和

GlobalConsumer

的对象导出为

default

export from

GlobalStore.js

。删除

default

关键字，它将与常规命名导出一样工作

export{GlobalProvider，GlobalConsumer}；

globalstore

export default{GlobalProvider，GlobalConsumer}

中不需要

default

，而

import{}

看起来像是解构，与对象解构不同。该语法与命名导出相关。你和命名的导出混淆了。如果您仅使用

export

（而不是

export default

）导出某些内容，则可以使用

import{}from…

按名称导入它。但是，如果使用

export default

，则只需为导入指定一个名称（例如，

import Store from./GlobalStore'

），然后对其进行分解（

const{GlobalProvider}=Store

）