Question

我对React有点新，我在将一些变量从我的Django服务器传递到我的React组件时遇到了一些麻烦。这就是我所拥有的：

服务器是Django，我有一个url mydomain.com/testview/，它被映射到一个views.py函数testview：

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

换句话说，运行testview将呈现模板文件testview.html，并将使用变量foo和myVar。

文件testview.html继承自base.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基本上将所需的代码插入到block main中：

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

请注意，在div id =＆＃34; App＆＃34;之前，我创建了几个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文件呈现App组件，传入foo和myVar。在类App中，我认为这些是道具，所以我使用props.foo和props.myVar将它们传递给AppContainer。我的AppContainer类位于components文件夹中，如下所示：

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

但是，这似乎都不起作用。我只是得到一个空白页面。我做错了什么？

Answer 1

如果foo和myVar是字符串，则应声明

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

Answer 2

所以这就是我需要做的才能让它发挥作用。首先，我使用了上面的Giang Le的答案和我的testview.html文件（一个Django模板文件），我在变量周围加上引号，因为它们确实是字符串。接下来，我将App.jsx文件中的render语句更改为：

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

这使用Bruno Vodola Martins的答案来访问foo和myVar作为javascript全局变量。我还必须在我的App类中使用this.props.foo而不是props.foo：

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

我在containers / 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>
    )
  }
}

底线：在Django的字符串变量周围加上引号，并使用this.props.foo而不仅仅是props.foo。

如何将JavaScript变量传递给React组件

2 个答案: