Fatal编程技术网
  • symfony/
  • Symfony 如何将运行时变量传递到react/webpack模块

Symfony 如何将运行时变量传递到react/webpack模块

symfony reactjs variables webpack

Symfony 如何将运行时变量传递到react/webpack模块,symfony,reactjs,variables,webpack,global-variables,Symfony,Reactjs,Variables,Webpack,Global Variables,我正在尝试将Angular 1.x应用程序转换为React/Redux 我已经取得了成功，并且对React和学习它、Redux等非常满意（这是通过创建React应用程序和使用npm start的常规开发流程等）。我的“测试”应用程序工作得很好，现在我准备集成到Symfony中，取代现有的Angular应用程序 但是，我遇到了一个障碍。前端是Symfony PHP框架应用程序的一部分，我不确定将运行时变量从Symfony注入或传递到最终包含的已编译webpack react应用程序的最佳方式 在A

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

我已经取得了成功，并且对React和学习它、Redux等非常满意（这是通过创建React应用程序和使用npm start的常规开发流程等）。我的“测试”应用程序工作得很好，现在我准备集成到Symfony中，取代现有的Angular应用程序

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

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

[js在Symfony html文件中]
然而，作为一个新的反应和网页，我不知道如何做同样的。我试过各种不同的组合

[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>

[js在Symfony html文件中]
var v1='{var1}}'；
var v2='{var2}}'；
ReactDOM.render(
{React.createElement（App，{parm1:v1，parm2:v2}，null），
document.getElementById（'root'））
);
但是ReactDOM和React没有定义，因为我“在”包含的已编译React应用程序之外，因此无法访问（或者它们是吗？）

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

[js在Symfony html文件中]
var v1='{var1}}'；
var v2='{var2}}'；
window.passedv1=v1；
window.passedv2=v2；
然后通过以下方式访问我的React应用程序：

[js in react app]

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

[react应用程序中的js]
var v1=window.passedv1；
var v2=window.passedv2；
ReactDOM.render(
,
document.getElementById（'root'））
);
有谁能解释一下实现这一目标的最佳方法吗？我知道必须有一种更好的、不那么刻薄的方法

提前感谢,

标记

另外，我还使用如下数据属性传递参数：

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

var el=document.getElementById（'root'）；
var v1=el.getAttribute（“数据-parm1”）；
var v2=el.getAttribute（“数据parm2”）；
ReactDOM.render(
,
document.getElementById（'root'））
);
这非常有效，但我在一些地方读到，在React中使用数据属性是不推荐和不赞成的

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

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

index.html 

例子
var v1='{var1}}'；
var v2='{var2}}'；
挂载（v1、v2）
index.js 
从“React”导入React
从“react dom”导入react dom
从“/App”导入{App}
window.mount=功能（v1、v2）{
ReactDOM.render（，document.getElementById（'root'））
}
我使用的是ES6和JSX语法，但是如果您想要一个没有这些语法的示例，请告诉我。

谢谢Michael。我没有考虑过“从另一边”访问它。我喜欢它公开/传递mount函数，而不是变量。我只是再次阅读了我的答案，我不确定它在当前状态下是否真的工作（我试图巧妙地使用参数）。我稍后不在手机上时会更新它。概念是一样的，只是道具的传递方式会改变。我已经更新了宝贵评论中提到的答案。我还使用数据属性传递了参数，如下所示： 
<div id="root" data-parm1="val" data-parm2="val"></div>

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

<!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>

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