如何将变量从“外部”传递给反应应用？

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.

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

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

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

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

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

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

我正在努力，因为javascript当然在构建阶段缩小了，所以任何声明如下：

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

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

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

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

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?

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

2 个解决方案

#1

I see two options here.

我在这里看到两个选择。

Assign the variables to the window object
将变量分配给窗口对象
Use environment variables
使用环境变量

Using the window object

使用窗口对象

To use the window object, declare the variable as

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

myVar = 'someString'

要么

window.myVar = 'someString'

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

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

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>

Using environment variables

使用环境变量

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:

Create React App构建允许在应用程序中使用环境变量。要添加环境变量，请在项目的根目录中创建.env文件，然后添加适当的变量并使用REACT_APP_作为变量名称的前缀。例如：

REACT_APP_MYVAR = "someString"

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%.

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

#2

The EcmaScript 6 introduced block-scope variables and constants declared by let resp. const.

EcmaScript 6引入了由let resp声明的块范围变量和常量。常量。

In contrast to the "old style" declaration of variable by var the visibility of such variable resp. constant is limited to actual block.

与变量的“旧样式”声明相比，变量可见这种变量的可见性。常数仅限于实际块。

The scope of constant const1 (resp. const2) is therefore limited only to the code inside the script tag. To be able to access the const1 (resp. const2) from another script tag you would need to change its visibility. This can be achieved either by declaring it by var or by assigning its value to a variable declared by var.

因此，常量const1（resp.const2）的范围仅限于脚本标记内的代码。为了能够从另一个脚本标记访问const1（resp.const2），您需要更改其可见性。这可以通过用var声明它或通过将其值赋给var声明的变量来实现。

E.g.:

例如。：

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

Later in your React application you can read it from window.visibleConst1.

稍后在您的React应用程序中，您可以从window.visibleConst1中读取它。

#1