如何将“外部”变量传递给反应应用程序?
我使用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。有没有一种方法可以调用反应组件,并从外部传递变量?
我在这里看到两个选项。
- 分配变量到
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%
内。
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
阅读。
这非常强大 - 感谢分享!我想在编译时它会变成一个正式的环境(所以'window.visibleConst1 = const1')变量是向后兼容的吗? – Aaron
环境变量是否工作? –
呃!天才 - 是的,它确实有用! – Aaron
我已经包含了环境变量和另一种方法作为解决方案。 –