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

  • Z时代
  • 2024-01-10
  • 分类：问答

我使用创建了一个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组件，并从外部将其传递给变量？

回答：

我在这里看到两个选择。

  1. 将变量分配给window对象

  2. 使用环境变量

要使用该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%。

以上是 如何将变量从“外部”传递到React应用？ 的全部内容， 来源链接： utcz.com/qa/411441.html

回到顶部