Wie man JavaScript-Variablen an React-Komponente übergibt

Ich bin etwas neu zu Reagieren und ich habe einige Schwierigkeiten, einige Variablen von meinem Django-Server zu meinen React-Komponenten zu übergeben. Hier ist, was ich habe:Wie man JavaScript-Variablen an React-Komponente übergibt

Der Server ist Django, und ich habe eine URL mydomain.com/testview/, die zu einer views.py Funktion Testview abgebildet wird:

def testview(request): 
    now = datetime.datetime.now() 
    return render(request, 'testview.html', { 
     'foo': '%s' % str(now), 
     'myVar': 'someString' 
    })

Mit anderen Worten läuft Testview wird Rendert die Vorlagendatei testview.html und verwendet die Variablen foo und myVar.

Die Datei testview.html erbt von base.html, die wie folgt aussieht:

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    </head> 
    <body> 
    {% block main %}{% endblock %} 
    </body> 
</html>

Die Datei test.html im Grunde fügt den benötigten Code in Block Haupt:

testview.html:

{% extends "base.html" %} 
{% load render_bundle from webpack_loader %} 

{% block main %} 
<script type="text/javascript"> 
var foo = {{ foo }}; 
var myVar = {{ myVar }}; 
</script> 
<div id="App"></div> 
{% render_bundle 'vendors' %} 
{% render_bundle 'App' %} 
{% endblock %}

Beachten Sie, dass ich kurz vor dem div id = "App" ein paar Javascript-Variablen foo und myVar erstellt habe und sie auf die Werte von Django gesetzt habe. Jetzt

reagieren zu können: meine Datei App.jsx wie folgt aussieht:

import React from "react" 
import { render } from "react-dom" 

import AppContainer from "./containers/AppContainer" 

class App extends React.Component { 
    render() { 
    return (
     <AppContainer foo={props.foo} myVar={props.myVar}/> 
    ) 
    } 
} 

render(<App foo={window.foo} myVar={window.myVar}/>, document.getElementById('App'))

Mit anderen Worten, meine App.jsx Datei macht die App-Komponente, in foo und myVar vorbei. In der Klasse App habe ich angenommen, dass es sich um Requisiten handelt, also gebe ich diese mit apps.foo und props.myVar an AppContainer weiter. Meine Klasse AppContainer befindet sich in einem Komponentenordner und sieht folgendermaßen aus:

import React from "react" 

import Headline from "../components/Headline" 

export default class AppContainer extends React.Component { 
    render() { 
    return (
     <div className="container"> 
     <div className="row"> 
      <div className="col-sm-12"> 
      <Headline>Running App! foo is {props.foo}, Here is a string: {props.myVar}</Headline> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
}

Nichts davon scheint jedoch zu funktionieren. Ich bekomme nur eine leere Seite. Was mache ich falsch?

Quelle

2017-11-07 Marc

Hey, Marc, versuche das "Fenster" aus den Variablen in der letzten Zeile deiner 'App.jsx' Datei zu entfernen:' render (, document.getElementById ("App")). Du hast sie als Globals erstellt, sodass sie nur mit ihren Namen erreichbar sind. Keine Notwendigkeit für "Fenster". –

versuchen, foo-Wert nach dieser Zeile zu alarmieren, var foo = {{foo}}; –

wenn foo und myVar Zeichenfolge ist, sollten Sie erklären

var foo = "{{ foo }}"; 
var myVar = "{{ myVar }}";

Quelle

2017-11-07 04:21:51

Also das ist, was ich es tun musste, um zu arbeiten. Zuerst habe ich die obige Antwort von Giang Le verwendet und in meiner Datei testview.html (eine Django-Vorlagedatei) habe ich die Variablen in Anführungszeichen gesetzt, da sie tatsächlich Zeichenfolgen waren. Als nächstes änderte ich die Aussage machen in meinem App.jsx Datei dies sein:

render(<App foo={foo} myVar={myVar}/>, document.getElementById('App'))

Diese verwendet Antwort Bruno Vodola Martins' foo und myVar als JavaScript-Globals zuzugreifen. Ich hatte auch this.props.foo statt props.foo in meiner App-Klasse zu verwenden:

class App extends React.Component { 
    render() { 
    return (
     <AppContainer foo={this.props.foo} myVar={this.props.myVar}/> 
    ) 
    } 
}

Und ich habe die gleiche Sache in Containern/AppContainer.jsx:

export default class AppContainer extends React.Component { 
    render() { 
    return (
     <div className="container"> 
     <div className="row"> 
      <div className="col-sm-12"> 
      <Headline>App! foo is {this.props.foo}, Here is a string: {this.props.myVar}</Headline> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
}

Bottom line: zitieren Sie String-Variablen aus Django in Anführungszeichen und verwenden Sie this.props.foo statt nur props.foo.

Quelle

2017-11-07 06:06:10 Marc

Wie man JavaScript-Variablen an React-Komponente übergibt

Antwort

Verwandte Themen