Jinja2とWebapp2でReactJSを使う

Question

私はWebapp2でreact jsを使っているプロジェクトに取り組んでいます。私は反応コンポーネントでjinja2を使用しようとしています。それは正常にコンパイルされますが、私は実際にWebページを読み込むとき。それはコンソールでエラーを出します。ここでは、単にページをレンダリングしていくつかの値を渡すハンドラコードを示します。

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を使用する2つの方法を試しました。

方法1：

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

このメソッドは、コンソールに次のエラーを与える：

方法2： 私は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> 
    ); 
}; 

ここはページビューです。

私はミスをやっているところ助けてください。

Answer 1

Flaskは、テンプレートファイル内のマークアップのみを前処理します。含まれている静的ファイルは決して実行されません。あなたの反応アプリが変数xにアクセスできるように、反応スクリプトをロードする前にこのスクリプトをテンプレートに入れておきます。ビュー

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>