如何将运行时变量传递到React/WebPack模块中

我正在尝试将一个Angular 1.X应用转换为React/redux。

我已经成功，对反应和学习，redux等都很满意(这是通过创建反应应用以及使用NPM启动的常规开发流等(。我的"测试"应用程序效果很好，现在我准备集成到Symfony替换现有的Angular应用程序。

，但是，我打了一个障碍。前端是Symfony PHP框架应用程序的一部分，我不确定将运行时变量从Symfony注入或通过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>

但是，我非常新的反应和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>

，但没有定义反应和反应，因为我在随附的编译后的React应用程序中"外部"，因此无法访问(或它们是？(。

我已经成功地通过通过全局窗口变量来创建黑客，但我知道必须有一个比这更合适的方法：(再次{{{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')
);

谁能为实现这一目标的最佳方法提供一些启示吗？我知道必须有一种更好的黑客方式。

预先感谢

马克

P.S。我还通过使用这样的数据传递了参数：

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')
);

这很棒，但我在几个地方阅读了使用data属性的几个地方，不建议在react中读取和皱眉。

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

我已经使用以下方法将变量传递给根组件。

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语法，但是让我知道您是否想要一个没有这些的例子。

index.html

index.js

相关内容

最新更新

热门标签：