能否将Django Template与React结合使用？若可以该如何操作？

当然可以把Django模板和React结合使用，根据项目规模和需求，有几种不同的实现思路，下面是具体操作方式：

方案一：直接在Django模板中嵌入React组件 #

这种方式适合已有Django项目，只想在部分页面引入React交互组件的场景，操作最简单。

• 引入React依赖：
  小项目可以直接用CDN引入，在Django模板的<body>末尾添加：

  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!-- 如需编译JSX，引入Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  

  若项目较大，建议用Create React App构建，执行npm run build后，将build/static下的资源复制到Django的static目录，再用{% static %}标签引入。

• 预留React渲染容器：
  在模板需要插入React的位置添加DOM容器：

  <div id="react-component-container"></div>
  

• 编写并渲染React组件：
  在模板中添加<script type="text/babel">标签，编写组件并渲染到容器：

  function UserProfile({ username }) {
    return <div>Hello, {username}!</div>;
  }
  
  const root = ReactDOM.createRoot(document.getElementById('react-component-container'));
  root.render(<UserProfile username="DjangoUser" />);
  

方案二：Django做后端API，React作为单页应用（SPA） #

这种是前后端分离的经典模式，Django专注提供数据接口，React负责整个前端页面渲染，适合全新的大型项目。

• 搭建Django API后端：
  安装Django REST Framework：

  pip install djangorestframework
  

  配置INSTALLED_APPS加入rest_framework，然后编写序列化器、视图和URL路由，返回JSON格式的数据。比如一个简单的文章列表接口：

  # views.py
  from rest_framework import generics
  from .models import Article
  from .serializers import ArticleSerializer
  
  class ArticleList(generics.ListAPIView):
      queryset = Article.objects.all()
      serializer_class = ArticleSerializer
  

• 创建React前端项目：
  在项目根目录执行：

  npx create-react-app frontend
  

  在React组件中通过fetch或axios调用Django API：

  // src/components/ArticleList.js
  import { useState, useEffect } from 'react';
  import axios from 'axios';
  
  function ArticleList() {
    const [articles, setArticles] = useState([]);
  
    useEffect(() => {
      axios.get('/api/articles/')
        .then(res => setArticles(res.data))
        .catch(err => console.error(err));
    }, []);
  
    return (
      <ul>
        {articles.map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    );
  }
  
  export default ArticleList;
  

• 处理跨域与部署：
  开发阶段，若React和Django跑在不同端口，安装django-cors-headers解决跨域：

  pip install django-cors-headers
  

  配置INSTALLED_APPS和MIDDLEWARE后，设置CORS_ALLOWED_ORIGINS允许React的访问地址。
  部署时，将React执行npm run build后的静态文件放到Django的static和templates目录，或用Nginx分别部署前后端。

方案三：从Django模板传递数据到React组件 #

如果需要把Django模板中的上下文数据传给React，有两种常用方式：

• 通过全局JS变量传递：
  用Django的json_script过滤器把数据转成安全的JSON格式，赋值给JS变量：

  {{ user_data|json_script:"user-data" }}
  <script>
    const userData = JSON.parse(document.getElementById('user-data').textContent);
  </script>
  

  之后在React组件中直接使用userData。

• 通过DOM data属性传递：
  在React容器元素上添加data属性：

  <div id="react-root" data-user='{{ user_data|jsonify }}'></div>
  

  在React中获取：

  const rootEl = document.getElementById('react-root');
  const userData = JSON.parse(rootEl.dataset.user);
  

内容的提问来源于stack exchange，提问作者Dante