Question

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

网页上有一些全局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>

我很难挣扎，因为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();");

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

Answer 1

我在这里看到两个选项。

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

使用window对象

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

myVar = 'someString'

或

window.myVar = 'someString'

在这两种情况下，您都将使用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>

使用环境变量

Create React App构建允许应用内的environment variables to be used。要添加环境变量，请在项目的根目录中创建.env文件，然后添加适当的变量并在变量名前加REACT_APP_。例如：

REACT_APP_MYVAR = "someString"

在应用中，可以使用{process.env.REACT_APP_MYVAR}在您的组件中访问这些变量，也可以使用%REACT_APP_MYVAR%在HTML中访问这些变量。

Answer 2

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

与旧式＃34;形成鲜明对比。变量声明var这种变量的可见性。常数仅限于实际阻止。

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

E.g：

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

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

如何从外部传递变量＆＃39;一个反应应用程序？

2 个答案: