如何将变量从“外部”传递给反应应用程序？ [英] How can I pass a variable from 'outside' to a react app?

问题描述

我使用 create-react-app my-app 创建了一个反应应用。我有一个现有的网页，反应应用程序附加到html页面中的div - 按照正常情况。

I have created a react app using create-react-app my-app. I have an existing web page, and the react app attaches to a div within the html page - as per normal.

网页上有一些全局javascript常量 const1 和 const2 反应应用程序运行所需的。有没有办法可以将这些变量传递给react应用程序？结构如下

The web page has some global javascript constants const1 and const2 that are needed for the react app to function. Is there a way I can pass these variables to the react app? The structure is as follows

<script type="text/javascript">
  const const1 = "1234";
  const const2 = "5678";
</script>

<script type="text/javascript" src = "/static/react-app.js" ></script>

我很难挣扎，因为javascript当然在构建阶段缩小了，所以任何声明如下：

I'm struggling because the javascript is of course minified during the build phase, so any declarations as follows:

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      stat1: const1,
      stat2: const2,

在重写变量时不起作用。我试图偷偷摸摸并按如下方式使用eval

don't work as the variables are re-written. I have tried to be sneaky and use eval as follows

const const1 = eval("function c1(){console.log(const1);return const1;};c1();");

但eval（和console.log）返回undefined。有没有办法可以调用react组件，并从外部传递变量？

but the eval (and the console.log) return undefined. Is there a way I can invoke a react component, and pass it variables from the outside?

推荐答案

我在这里看到两个选项。

I see two options here.

1. 将变量分配给窗口对象


2. 使用环境变量

使用窗口对象

Using the window object

要使用窗口对象，请将变量声明为

To use the window object, declare the variable as

myVar = 'someString'

或

window.myVar = 'someString'

在这两种情况下，您都将使用 window.myVar 访问React中的变量。这是一个简单的例子：

In both cases you'll access the variable within React with window.myVar. Here's a quick example:

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React and ES6!</h1>
        <p>Let's play. :)</p>
        <p>{window.myVar}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>
<script>
  window.myVar = 'someString2'
</script>

使用环境变量

Create React App build允许要使用的环境变量。要添加环境变量，请在项目的根目录中创建 .env 文件，然后添加相应的变量并在变量名前加上 REACT_APP _ 。例如：

The Create React App build allows for environment variables to be used within the app. To add an environment variable create a .env file in the root of your project, then add the appropriate variables and prefix the variable name with REACT_APP_. For example:

REACT_APP_MYVAR = "someString"

在应用程序中，可以使用 {process.env.REACT_APP_MYVAR} 在组件中访问这些变量，或者在HTML中使用％REACT_APP_MYVAR％。

In the app these variables can be accessed within your components with {process.env.REACT_APP_MYVAR}, or within the HTML with %REACT_APP_MYVAR%.

这篇关于如何将变量从“外部”传递给反应应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！