JavaScript変数をReactコンポーネントに渡す方法

私は幾分新しくReactするのですが、私はDjangoサーバーからReactコンポーネントにいくつかの変数を渡す際に問題があります。JavaScript変数をReactコンポーネントに渡す方法

サーバはジャンゴである、と私はviews.py機能TestViewににマッピングされるURLのmydomain.com/testview/あります：ここで私が持っているものだTestViewにします実行している、言い換えれば

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

をテンプレートファイルtestview.htmlをレンダリングし、変数fooとmyVarを使用します。

testview.html：

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

は、ファイルtest.htmlという、基本的にメインブロックに必要なコードを挿入：

ファイルtestview.htmlは次のようになりbase.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 %}

div id = "App"の直前に、私はいくつかのjavascript変数fooとmyVarを作成し、それらをDjangoの値に設定しました。

今すぐ反応するように：私のファイルApp.jsxは次のようになります。つまり

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

、私App.jsxファイルはfooとmyVarを渡し、アプリケーションコンポーネントを描画します。 Appクラスの中では、これらが小道具であると仮定したので、これらをprops.fooとprops.myVarを使用してAppContainerに渡します。私のクラスAppContainerは、コンポーネントフォルダ内で、次のようになります。

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

しかし、これのどれも動いていないようにみえ。私は空白のページを取得します。私は間違って何をしていますか？

出典

2017-11-07 Marc

あなたの 'App.jsx'ファイルの最後の行の変数から' window'を削除してみてください： 'render（、document.getElementById （ 'App'）） 'を実行します。それらをグローバルとして作成したので、名前だけでアクセスできます。 'window.'の必要はありません。 –

この行の後にfoo値を警告しようとすると、var foo = {{foo}}; –

fooとmyVarには、あなたがそう、これは私はそれを動作させるために行うために必要なものである

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

出典

2017-11-07 04:21:51

を宣言する必要がある文字列である場合。まず、私は上記のGiang Leの答えを使用し、testview.htmlファイル（Djangoテンプレートファイル）では、実際に文字列だったので変数を引用しています。

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

これではJavaScriptグローバルとしてfooとmyVarにアクセスするためにブルーノ・マルティンスVodola答えを使用：次に、私はこのように私のApp.jsxファイルでレンダリング文を変更しました。

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

そして私は、コンテナ/ AppContainer.jsxで同じことをした：私はまた私のアプリのクラスに代わりprops.fooのthis.props.fooを使用する必要がありました

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

ボトムライン： Djangoの文字列変数を引用符で囲み、単にprops.fooの代わりにthis.props.fooを使用します。

出典

2017-11-07 06:06:10 Marc

JavaScript変数をReactコンポーネントに渡す方法

答えて

関連する問題