如何将变量从“外部”传递到React应用？

Question

我使用创建了一个react应用create-react-app my- app。我有一个现有的网页，并且react应用程序按正常方式附加到html页面内的div。

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

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

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

我正在努力，因为javascript当然在构建阶段会被精简，因此任何声明如下：

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

由于变量被重写而无法正常工作。我试图偷偷摸摸，并使用eval如下

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

但是评估（和console.log）返回未定义。有没有一种方法可以调用react组件，并从外部将其传递给变量？

Answer 1

我在这里看到两个选择。

1. 将变量分配给window对象
2. 使用环境变量

使用window对象

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

myVar = 'someString'

要么

window.myVar = 'someString'

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

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构建允许在应用程序内使用环境变量。要添加环境变量.env，请在项目的根目录中创建一个文件，然后添加适当的变量，并在变量名前添加REACT_APP_。例如：

REACT_APP_MYVAR = "someString"

在应用程序中，可以使用在组件内部{process.env.REACT_APP_MYVAR}或通过HTML在HTML中访问这些变量%REACT_APP_MYVAR%。