我有一些非敏感数据，我需要根据在staging或 中运行的环境节点将它们设置为不同的值production。我相信访问类似的东西process.env.NODE_ENV不会在react组件本身内工作，只能在服务器端文件中工作，因此需要一种方法以某种方式将其传递给我的react组件。
它只是在页脚组件中显示字符串“Staging”或“Production”。
从react组件访问环境变量
IT技术
javascript
node.js
reactjs
environment-variables
webpack
2021-04-30 19:52:10
2个回答
考虑使用DefinePlugin：
定义自由变量。对于使用调试日志或添加全局常量进行开发构建很有用。
例子：
new webpack.DefinePlugin({ VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object") })
create-react-app创建一个具有环境变量访问权限的 React 应用程序。
所以你可以process.env.NODE_ENV在你的代码中使用而无需任何额外的步骤。
它还使任何REACT_APP_以开头的环境变量可用于应用程序。
您也可以获得.env支持。
例子
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
users: []
};
}
componentDidMount() {
fetch(process.env.REACT_APP_SERVER_URL)
.then(response => response.json())
.then(users => this.setState({ users }));
}
render() {
return (
<div className="App">
<header className="App-header">
<h1>Env var demo</h1>
</header>
<main>
<ul>
{this.state.users.map(user => (<li key={user.id}>Name: {user.name}</li>))}
</ul>
</main>
<footer className="App-footer">
<p>ENVIRONMENT: {process.env.NODE_ENV}</p>
</footer>
</div>
);
}
}
export default App;
参考环境变量文档：https : //create-react-app.dev/docs/adding-custom-environment-variables/