[英]Django project not rendering React.js
在我的项目中,我试图将 Django 和 React 结合在一起。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> {% load static %}
<link rel="icon" href="{% static 'logofavicon.ico' %}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta property="og:image" content="{% static 'Banner.png' %}">
<meta name="description" content="The future of digital content" />
<link rel="apple-touch-icon" href="{% static 'logo192.png' %}" />
<link rel="manifest" href="{% static 'manifest.json' %}" />
<title>Drop Party</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="{% static 'index.js' %}"></script>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./styleguide.css";
import "./globals.css";
ReactDOM.render( <
React.StrictMode >
<
App / >
<
/React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
设置.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/frontend/'
STATICFILES_DIRS = (
FRONTEND_DIR / 'build', FRONTEND_DIR / 'src', FRONTEND_DIR / 'public'
)
项目层次结构
我查看了这篇文章,并确认此解决方案不适用于我。
我认为主要问题是 Django 正在为 html 提供服务,但没有运行.js,所以我不确定 go 的位置。
我还确认图像链接也正常工作,所以我没有收到 404 错误或类似的错误。
次要的半相关问题:我应该像这样链接网站图标吗? 我觉得我不应该静态地为 html 服务,但除了静态地为 html 服务之外,我无法找到如何准确地服务于该项目。
(编辑)我在脚本中添加了注释,但现在我收到一个错误,Django 似乎拒绝了 React 标签。
在public
文件夹中获取index.js
。
在body
标签之后添加下面的行,
<script src="index.js"></script>
您的 HTML 文件没有您的index.js
的<script>
标记(尽管有趣的是,它确实有一个<noscript>
)。
您需要告诉您的页面您要运行的每个 JS 文件,您可以使用<script>
标签来执行此操作。
有关更多信息,请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.