我如何轻松改变背景？

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