Question

假设我在urls.py中有一堆现有的Django webapp和一堆url。现在假设我想在这个Django应用程序中添加一些网页，其中新的网页是使用React构建的。根据我的理解，React有自己的路由功能（在react-router中），所以如果我去mydomain.com/page1/它将提供一件事，如果O去mydomain.com/page2/它会提供其他东西。但是，如果我不想使用react-router怎么办？换句话说，如果我要添加10个新页面并且每个页面都有自己的URL，那么为什么我不能在Django的urls.py文件中设置它？

目前在urls.py中我有一个这样定义的网址：

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知道在哪里可以找到模板。所以在我看来上面的方法中，＆＃34; testview.html＆＃34;指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，如下所示：

导入来自＆＃34;反应＆＃34;

的反应

从＆＃34; ../ components / Headline＆＃34;

导入标题

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

在这里，我传递变量＆＃39; currtime＆＃39;。如何将其传递到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组件，就像普通的反应应用程序一样。只需使用render(App1.jsx)来调用它们。

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

Answer 2

react-router是一个前端路由器，用于单页应用程序。如果您没有建立SPA，则不需要它。

你可以在任何地方连接一个反应父组件，它非常灵活，但是，如果你想用Django视图进行服务器端渲染方式并使用react来增强部分它，然后是的，你需要App2.jsx，App3.jsx等等（我建议选择更好的名字）

此外，如果您采用这种方式，请不要使用react来构建整个页面，只在需要额外交互性的地方使用它，比如小部件或其他东西。如果您在不将应用程序设置为SPA的情况下呈现整个页面，则会失去JS客户端应用程序和服务器端呈现的好处

您无法从django视图传递变量来响应组件，因为它们会在浏览器上呈现。无论您在react组件中需要什么数据，都必须使用AJAX请求获取，就像任何其他JS库一样

使用React与Django，我需要react-router吗？

2 个答案: