反应：如何使用 .env 文件中定义的变量？答案

【问题标题】：REACT: How to use a variable defined inside .env file?反应：如何使用 .env 文件中定义的变量？
【发布时间】：2020-07-22 09:11:53
【问题描述】：

如何使用在 .env 中定义的变量。例如，如果我声明了一个名为 REACT_APP_ONLINE_STATUS_TIME_MINUTES=5 的变量，我可以在 jsx 中将其用作条件变量，例如 online_time < ONLINE_STATUS_TIME_MINUTES我需要遵循哪些步骤？

【问题讨论】：

标签： reactjs environment-variables jsx

【解决方案1】：

你在用create-react-app吗？

如果是这种情况，那么您可以在 .env 文件中添加几乎任何变量。

但是，您的变量必须以前缀 REACT_APP_开头。

然后在您的代码中，您可以使用process.env 轻松访问您的变量。

例如：

const MyComponent = () => {
    return (
        {online_time < process.env.REACT_APP_ONLINE_STATUS_TIME_MINUTES
            && <MyOtherComponent />}
    );
}

这里，MyOtherComponent 仅在条件 online_time < process.env.REACT_APP_ONLINE_STATUS_TIME_MINUTES 为 true 时才会呈现。

如果您不使用 create-react-app，则可能需要使用 react-scripts。

【讨论】：

嗨@Fahad Munir，如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做

【解决方案2】：

您可以使用dotenv 库。

在此处查看用法： https://www.npmjs.com/package/dotenv#usage

process.env 现在拥有您在 .env 文件中定义的键和值。

【讨论】：