我对 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 基本上将所需的代码插入到 main 块中：
测试视图.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 文件呈现 App 组件，传入 foo 和 myVar。在 App 类中，我假设这些是 props，所以我使用 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>
)
}
}
然而，这一切似乎都不起作用。我只得到一个空白页。我究竟做错了什么？
