python - 将 ReactJS 与 Jinja2 和 Webapp2 结合使用

Question

我正在开发一个项目，在该项目中我将 React js 与 Webapp2 结合使用。我正在尝试在 React 组件中使用 jinja2。它编译成功但是当我实际加载网页时。它在控制台中给出错误。这是处理程序代码，我在其中简单地呈现页面并传递一些值。

class Login(BaseHandler, Handler):
    def get(self):
        jinja_environment = self.jinja_environment
        template = jinja_environment.get_template("/index.html")
        self.response.out.write(template.render({'a': "aa", 'b': "bb"})) 

我尝试了以下两种在 React 中使用 jinja2 的方法。

方法一:

var Main = (props) => {
    return (
        <div>
        {{a}} // directly use the jinja2 variable.
        <Nav/>
        <div className="row">
            <div className="columns medium-6 large-4 small-centered">
                {props.children}
            </div>
        </div>
    </div>
   );
};

此方法在控制台上给出以下错误:

方法二:我通常在 Javascript 中使用此方法，并且在那里工作正常。它不显示值，但页面呈现成功。

var Main = (props) => {
    var a = '{{a}}';
    return (
        <div>
            {a}
            <Nav/>
            <div className="row">
                <div className="columns medium-6 large-4 small-centered">
                    {props.children}
                </div>
            </div>
        </div>
    );
};

这是页面 View 。

请帮助我哪里做错了。

Answer 1

Flask 只预处理模板文件中的标记。它永远不会包含静态文件。因此，在 react 加载脚本之前将此脚本放在您的模板中，以便您的 react 应用程序可以访问变量 x。

在 View 中

import json
....
template.render({'some_details': json.dumps({'foo':'bar'})})
return render_template('login.html', some_details=json.dumps({"foo":"bar}))

在模板中

<script type="text/javascript">
  var x = {{ some_details|safe }};
  console.log("x and x.foo", x, x.foo)
</script>
<script src="/static/react_bundle.js"></script>