django - 将 React 与 Django 一起使用，我需要 React-router 吗？

Question

假设我有一个现有的 Django Web 应用程序，其中 urls.py 中有一堆 url。现在假设我想向这个 Django 应用程序添加许多网页，其中新网页是使用 React 构建的。

据我了解，React有自己的路由功能(在react-router中)，因此如果我访问mydomain.com/page1/，它将提供一件事，如果我转到mydomain.com/page2/ 它将提供其他服务。

但是如果我不想使用react-router怎么办？换句话说，如果我要添加 10 个新页面，并且每个页面都有自己的 URL，那么为什么我不能在 Django 的 urls.py 文件中进行设置呢？

目前在 urls.py 中，我有一个如下定义的 url:

url(r'^testview/', views.testview),

在views.py中，我像这样定义testview:

def testview(request):
    return render(request, 'testview.html', {})

我的 Django 模板存储在文件夹 BASE_DIR/myproject/templates/ 中，并且我在 BASE_DIR/myproject/settings.py 中设置了 TEMPLATES 变量，以便 Django 知道在哪里找到模板。所以在我上面的 View 方法中，testview.html指的是BASE_DIR/myproject/templates/testview.html。该文件的内容是:

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

{% block main %}
<div id="App1"></div>
{% render_bundle 'vendors' %}
{% render_bundle 'App1' %}
{% endblock %}

最后，我在App1.jsx中定义了App1，如下:

import React from "react"

import Headline from "../components/Headline"

    class App1 extends React.Component {
      render() {
        return (
          <div className="container">
            <div className="row">
              <div className="col-sm-12">
                <Headline>Hello There!</Headline>
              </div>
            </div>
          </div>
        )
      }
    }

这工作正常，但如果我想要 10 个不同的页面怎么办？我是否需要新的应用程序文件，例如 App2.jsx、App3.jsx 等，每个页面一个？

最后，假设我想将 Django 变量传递给我的 React 应用程序，例如:

def testview_with_time(request):
    now = datetime.datetime.now()
    return render(request, 'testviewtime.html', {
        'currtime': '%s' % str(now),
    })

这里我传递变量currtime。如何将其传递到 React App1 类中？

Answer 1

@Marc，我认为您所获得的信息是正确的。我同意@SrThompson的回答，但我会做一些细微的改变:

<小时/>

从 Django 开始。在您的 testview.html 中:

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

{% block main %}
<div id="{{component_name}}"></div>
{% render_bundle 'vendors' %}
{% render_bundle component_name %}
{% endblock %}

因此，会有一个 component_name 上下文变量，它定义了 React 渲染的组件，并设置了主 div 的 ID。

<小时/>

跳转到 React，您可能会有一个如下所示的 render.js 文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../somewhere';    

const render = Component => {
  ReactDOM.render(
    <App>
      <Component />
    </App>,
    document.getElementById(Component.name)
  )
}

export default render;

此渲染函数采用您作为参数传递的 Component 并将其渲染到具有 id='Component' 的元素，就像您在上下文变量中设置的那样 Django 。您还可以在每个渲染组件之上获得 App 组件，就像普通的 React 应用程序一样。例如，只需使用 render(App1.jsx) 调用它们即可。

<小时/>

这样您就不必担心只创建一个 .hmtl 文件来渲染 React 组件。