如何轻松更改上下文？

Posted 2023-02-19

【中文标题】如何轻松更改上下文？

【英文标题】：How do I easily change context?

【发布时间】：2019-08-27 05:34:24

【问题描述】：

我正在使用故事书来模拟我的应用的页面。我有一个想法，我用一个上下文为模拟数据包装故事书，然后当我运行真实的应用程序时，我可以给它另一个上下文，它将从 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)

【问题讨论】：

您仍然可以在真实应用程序和故事书中使用Context，但在真实应用程序中，您使用Provider 和value 更适合您的应用程序。

@Tholle 故事书和真实应用程序都将使用相同的Context，但我将不同的值传递给每个？

是的，这听起来是个好主意。在故事书中，您可以使用<Context.Provider value="hello!"> 和应用程序中的<Context.Provider value="something else!"> 提供提供程序。

@Tholle 谢谢！！！

【参考方案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.