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

我使用create-react-app my-app创建了一个反应应用程序。我有一个现有的网页，反应应用程序附加到HTML页面内的div - 按照正常。如何将“外部”变量传递给反应应用程序？

网页上有一些全局JavaScript常量const1和const2，这是响应应用程序正常工作所需的。有没有一种方法可以将这些变量传递给反应应用程序？该结构如下

<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。有没有一种方法可以调用反应组件，并从外部传递变量？

来源

2017-06-20 Aaron

环境变量是否工作？ –

呃！天才 - 是的，它确实有用！ – Aaron

我已经包含了环境变量和另一种方法作为解决方案。 –

我在这里看到两个选项。

分配变量到window对象
使用环境变量

使用window对象

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

myVar = 'someString'

或

window.myVar = 'someString'

在这两种情况下，内与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>

使用环境变量

的创建作出反应应用构建允许在应用程序内environment variables to be used。要添加环境变量，请在项目的根目录下创建一个.env文件，然后添加适当的变量并在变量名前加REACT_APP_。例如：

REACT_APP_MYVAR = "someString"

在应用这些变量可以在组件内的{process.env.REACT_APP_MYVAR}访问，或HTML与%REACT_APP_MYVAR%内。

来源

2017-06-21 07:09:34

谢谢！我猜'myVar ='someString''类似于@Petr建议在ES6中使用'var'？ – Aaron

对我来说，window.myVar的方式不起作用，React没有看到变量 – cal

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

与var变量的“旧式”声明相比，这种变量的可见性分别为：常数限于实际块。

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

例如为：

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

在您的应用程序做出反应之后，你可以从window.visibleConst1阅读。

来源

2017-06-20 21:38:43 Petr

这非常强大 - 感谢分享！我想在编译时它会变成一个正式的环境（所以'window.visibleConst1 = const1'）变量是向后兼容的吗？ – Aaron

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

回答

相关问题