如何轻松地更改上下文？

Question

我在使用storybook来模拟我的应用程序页面。我有一个想法，即将storybook与一个上下文一起包装以获取模拟数据。当我运行真实的应用程序时，我可以给它另一个上下文，并从API获取数据。

如何使用useContext实现这一点？我的问题是useContext要求我导入一个上下文，这个上下文需要轻松更换为另一个上下文。因为模拟上下文和实际上下文位于不同的文件夹中，导入路径将不同。

在我的storybook配置中：

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)

- Kwokamole

---

你仍然可以在真实应用程序和storybook中使用你的Context，但在真实应用程序中，你需要使用一个更适合你的应用程序的value与Provider。 - Tholle

@Tholle 故事书和真实应用程序都将使用相同的“上下文”，但是我向每个中传递不同的值？ - Kwokamole

是的，这听起来是个好主意。在storybook中，你可以使用<Context.Provider value="hello!">提供一个提供者，在应用程序中则使用<Context.Provider value="something else!">。 - Tholle

@Tholle 谢谢!!! - Kwokamole

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

如何使用require导入默认导出的答案。

- cbdeveloper