如何将运行时变量传递给 react/webpack 模块答案

【问题标题】：How do I pass a run-time variable into a react/webpack module如何将运行时变量传递给 react/webpack 模块
【发布时间】：2017-04-29 01:05:48
【问题描述】：

我正在尝试将 Angular 1.x 应用程序转换为 React/Redux。

我已经成功并且对 React 和学习它、Redux 等非常满意（这是通过 create-react-app 并使用通常的 npm start 开发流程等）。我的“测试”应用运行良好，现在我准备好集成到 Symfony 中，替换现有的 Angular 应用。

但是，我遇到了障碍。前端是 Symfony PHP 框架应用程序的一部分，我不确定将运行时变量从 Symfony 注入或传递到最终包含的编译 webpack react 应用程序的最佳方法。

在 Angular 中，这很容易（{{var1}} 和 {{var2}} 是 symfony php 变量）：

  [js in Symfony html file]

  <div ng-controller="MyController as vm" 
       ng-init="vm.init('{{var1}}', '{{var2}}')">
        <rendered-stuff>
        </rendered-stuff>
  </div>

但是，我对 React 和 Webpack 非常陌生，我不确定如何做同样的事情。我尝试了各种组合

[js in Symfony html file]

<script type="text/javascript">
    var v1='{{var1}}';
    var v2='{{var2}}';
    ReactDOM.render(
          {React.createElement(App, {parm1: v1, parm2: v2}, null),
          document.getElementById('root')
        );
</script>

但是 ReactDOM 和 React 没有定义，因为我在包含的已编译反应应用程序的“外部”，因此无法访问（或者它们是？）。

我通过传递全局窗口变量成功地创建了一个 hack，但我知道必须有比这更合适的方法：（再次强调 {{var1}} 和 {{var2}} 是 symfony php 变量）

[js in Symfony html file]

<script type="text/javascript">
        var v1 = '{{ var1 }}';
        var v2 = '{{ var2 }}';
        window.passedv1 = v1;
        window.passedv2 = v2;
</script>

然后通过以下方式访问我的 React 应用程序：

[js in react app]

var v1 = window.passedv1;
var v2 = window.passedv2;
ReactDOM.render(
   <App parm1={v1} parm2={v2} />,
   document.getElementById('root')
);

任何人都可以阐明实现此目的的最佳方法吗？我知道必须有一种更好的不那么骇人听闻的方式。

提前致谢，

标记

附：我还使用这样的 data- 属性传递了参数：

symfony html

<div id="root" data-parm1="val" data-parm2="val"></div>

我的应用程序内部的访问为：

index.js

var el = document.getElementById('root');
var v1 = el.getAttribute("data-parm1");
var v2 = el.getAttribute("data-parm2");

ReactDOM.render(
   <App parm1={v1} parm2={v2} />,
   document.getElementById('root')
);

这很好用，但我在几个地方读到不建议在 React 中使用 data- 属性并且不赞成。

但是，关于 React 的错误信息和相互矛盾的信息太多，有时很难知道要注意什么，要忽略什么。

【问题讨论】：

我也使用 data- 属性传递了参数，如下所示：

标签： symfony reactjs variables webpack global-variables

【解决方案1】：

我之前使用过以下方法将变量传递给根组件。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="/bundle.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript">
            var v1='{{ var1 }}';
            var v2='{{ var2 }}';
            mount(v1, v2)
        </script>
    </body>
</html>

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './app'

window.mount = function(v1, v2) {
    ReactDOM.render(<App v1={v1} v2={v2} />, document.getElementById('root'))
}

我使用的是 ES6 和 JSX 语法，但如果你想要一个没有这些的示例，请告诉我。

【讨论】：

谢谢迈克尔。我没有考虑“从另一边”访问它。我喜欢这会暴露/传递挂载函数而不是变量。
我刚刚再次阅读了我的答案，但我不确定它是否会在当前状态下实际工作（我试图巧妙地处理参数）。等我不玩手机的时候再更新。概念是一样的，只是props的传递方式会改变。
我已经更新了宝贵评论中提到的答案