我使用创建了一个react应用create-react-app my- app。我有一个现有的网页,并且react应用程序按正常方式附加到html页面内的div。
create-react-app my- app
该网页具有一些全局javascript常量const1,const2这是React应用程序运行所必需的。有什么办法可以将这些变量传递给react应用吗?结构如下
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();");
但是评估(和console.log)返回未定义。有没有一种方法可以调用react组件,并从外部将其传递给变量?
我在这里看到两个选择。
window
使用window对象
要使用该window对象,请将变量声明为
myVar = 'someString'
要么
window.myVar = 'someString'
在这两种情况下,您都将使用来访问React中的变量window.myVar。这是一个简单的例子:
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_。例如:
.env
REACT_APP_
REACT_APP_MYVAR = "someString"
在应用程序中,可以使用在组件内部{process.env.REACT_APP_MYVAR}或通过HTML在HTML中访问这些变量%REACT_APP_MYVAR%。
{process.env.REACT_APP_MYVAR}
%REACT_APP_MYVAR%