示例

Question

我有一些非敏感数据需要根据staging或production中运行的环境节点设置为不同的值，我相信访问类似process.env.NODE_ENV的内容将无效反应组件本身，只在服务器端文件中，因此需要一种方法以某种方式将其传递给我的反应组件。

只是在页脚组件中显示字符串“Staging”或“Production”。

Answer 1

考虑使用DefinePlugin：

定义自由变量。用于通过调试进行开发构建很有用   记录或添加全局常量。

示例：
new webpack.DefinePlugin({
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

Answer 2

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/

从react组件访问环境变量

2 个答案:

示例