Question

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

我该如何使用useContext？我的问题是useContext需要我导入一个上下文，该上下文需要很容易地换成另一个。由于模拟上下文和实时上下文位于不同的文件夹中，因此导入路径将不同。

在我的故事书配置中：

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 process.env.NODE_ENV配置为mode或development，则会自动设置production。否则，您可以使用DefinePlugin()自行设置。

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')
}