使用上下文 api 将代码拆分为文件

Question

我第一次使用上下文 API time.I 可以理解如何在单个代码中编写代码 page.But 我无法理解如何将其拆分为多个 files.When 我按如下方式拆分它给我一个错误，说我没有导出 MyProvider.But 我已经完成了 it.I 搜索了很多视频教程，但我找不到与我的相匹配的问题

App.js

import {MyProvider} from './Context';
import {myContext} from './Context';

class Name extends Component {
  render() {
    return (
      <div>
        <myContext.Consumer>
          {(context) => (
            <React.Fragment>
              <h1>Hello, {context.state.name}</h1>
              <h3>{context.state.address}</h3>
            </React.Fragment>
          )}
        </myContext.Consumer>
      </div>

    );
  }
}

class Age extends Component {
  render() {
    return (

        <div>
          <myContext.Consumer>
            {(context) => (
              <React.Fragment>
                <h1>You are {context.state.age} years old</h1>
                <h3>You were born in - {context.state.dob}</h3>
              </React.Fragment>
            )}

          </myContext.Consumer>
        </div>

    );
  }
}

class App extends Component {

  render() {
    return (
      <MyProvider>
        <div className="App">
          <Name />
          <Age />
        </div>
      </MyProvider>
    );
  }

}


export default App;

Context.js


export const myContext = React.createContext();

class MyProvider extends Component {
  state = {
    name: "Sam",
    address: "No.35,Main Street,Galle",
    age: 50,
    dob: "1970-10-21"
  }

  render() {
    return (
      <myContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </myContext.Provider>
    )
  }
} 

export default MyProvider;

Answer 1

您导入有误。当您导出为 default 时，您应该不带大括号导入它。

export default CLASS

import CLASS from

或者您可以将您的 class 导出为导出 class，然后您将像您一样导入它：

export class A

import { A }

更新： 请看

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

使用上下文 api 将代码拆分为文件

Splitting code into files using context api

reactjs

react-context