Verwendung von ReactJS mit Jinja2 und Webapp2

Question

Ich arbeite an einem Projekt, in dem ich die react js mit Webapp2 verwende. Ich versuche, jinja2 in der Reaktionskomponente zu verwenden. Es kompiliert erfolgreich, aber wenn ich die Webseite tatsächlich lade. Es gibt Fehler in der Konsole. Hier ist der Handler-Code, in dem ich einfach die Seite rendere und einige Werte übergebe.

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

Ich habe folgende zwei Methoden versucht jinja2 für die Verwendung in React.

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

Diese Methode gibt folgende Fehler auf der Konsole:

Methode 2: ich diese Methode in der Regel in Javascript und es verwenden, funktioniert dort gut. Der Wert wird nicht angezeigt, die Seite wird jedoch erfolgreich gerendert.

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

Hier ist die Seitenansicht.

Bitte helfen, wo ich Fehler mache.

Answer 1

Flask verarbeitet nur das Markup in der Vorlagendatei vor. Es wird niemals statische Dateien enthalten. Habe also dieses Skript in deiner Vorlage vor dem React Loading Skript, damit deine React App auf die Variable x zugreifen kann.

In Ansichten

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

In Vorlage

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