與Jinja2和Webapp2一起使用ReactJS

我正在開發一個項目，其中我正在使用Webapp2的反應js。我正在嘗試在反應組件中使用jinja2。它編譯成功，但是當我真正加載網頁。它在控制檯中給出錯誤。這裏是處理程序代碼，我只是簡單地渲染頁面並傳遞一些值。與Jinja2和Webapp2一起使用ReactJS

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的方法。

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

這是頁面視圖。

請幫我在哪裏做的錯誤。

來源

2017-02-27 shahzeb akram

是您的反應裏面的index.html代碼？ Jinja2將只處理該文件。 – aitchnyu

@aitchnyu沒有它的單獨'.jsx'組件文件，我正在用webpack編譯成'bundle.js'。這個'bundle.js'包含在我的html文件中。有什麼方法可以在React組件中使用Jinja2？ –

燒瓶只預處理模板文件中的標記。它永遠不會包含靜態文件。因此，請在反應加載腳本之前在模板中使用此腳本，以便您的反應應用程序可以訪問變量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>

來源

2017-02-28 07:29:45 aitchnyu

我正在使用Webapp2。這不是我正在尋找的。我們可以用你的方法在JavaScript中使用Jinja2。謝謝 –

'| safe'應該仍然適用於Jinja2和Webapp2。還有其他問題嗎？ – aitchnyu

其實我想在React組件中使用jinja2，如果可能的話？ –

與Jinja2和Webapp2一起使用ReactJS

回答

相關問題