从react组件访问环境变量

Question

我有一些非敏感数据需要根据环境节点的运行情况设置为不同的值,staging或者production我认为访问类似于process.env.NODE_ENV反应组件本身的内容,仅在服务器端文件中,因此需要某种方式来某种方式把它传递给我的反应组件.

它只是在页脚组件中显示字符串"Staging"或"Production".

Answer 1

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/

Answer 2

考虑使用DefinePlugin:

定义自由变量.对于使用调试日志记录或添加全局常量进行开发构建非常有用.

例:

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