javascript - 如何轻松更改上下文？

Question

我正在使用故事书来模拟我的应用程序页面。我有一个想法，我用一个上下文来包装故事书以获取模拟数据，然后当我运行真实的应用程序时，我可以给它另一个上下文，它将从 API 获取数据。

如何使用 useContext 执行此操作？我的问题是 useContext 要求我导入一个上下文，该上下文需要很容易地与另一个上下文交换。由于mock context和live context在不同的文件夹中，导入路径会有所不同。

在我的故事书配置中:

export const Context = React.createContext();

addDecorator(story => (
  <Context.Provider value="hello!">
    {story()}
  </Context.Provider>
))

在我的组件中:

import React, {useContext} from 'react;
import { Context } from 'path/to/context';

const value = useContext(Context)

Answer 1

如果您将 Webpack 与 Babel 捆绑在一起，这可能会有所帮助。不过，我认为您正在寻找的是一个环境变量，可以有条件地为您进行交换。

注意:如果您将 webpack mode 配置为 development 或 production，则 process.env.NODE_ENV 会自动设置>。否则，您可以使用 DefinePlugin() 自行设置。

Webpack mode docs

webpack.dev.js

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    })
  ]

webpack.prod.js

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    })
  ]

然后你可以这样做:

if (process.env.NODE_ENV === 'production') {
  require('./productionContext.js')
} else {
  require('./developmentContext.js')
}

Answer on how to require default exports.