react django呈现相同的内容
我正在做Django-react项目，在Django服务器上渲染React组件有问题。准确地说，React总是为我呈现相同的内容，即使我改变了它。我使用的是Webpack，Babel加载程序，并在本地主机上运行它。
项目/模板/前端/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django-React</title>
</head>
<body>
<div id="app" class="columns"><!-- React --></div>
{% load static %}
<script type='text/javascript' src="{% static "frontend/main.js" %}"></script>
</body>
</html>
入口点：
import ReactDOM from "react-dom";
import App from './components/App';
ReactDOM.render(<App/>, document.getElementById("app"));
Package.json中的脚本：
"scripts": {
"dev": "webpack --mode development ./frontend/src/index.js --watch ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js"
}
Babel配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
因此，当我在App组件中编写一些内容时(例如，使用“test”呈现div )我可以在浏览器中看到它，但是当我想要更改它时，在刷新页面后，从div标签获得相同的内容
回答 1
Stack Overflow用户
发布于 2019-03-21 22:39:24
根据我从你的问题中所理解的，当你第一次呈现一个带有“test”的div时，它会呈现，但在那之后，进一步的更改不会更新。
这是因为Django上的javascript没有被更新，你需要使用集合体来同步构建，效率不是很高。
方法是使用django-webpack-loader和webpack-bundle-tracker。
安装webpack-bundle-tracker
npm安装--保存-开发-捆绑包-跟踪程序
安装django-webpack-loader
pip安装django-webpack-装载器
django-webpack-loader是一个python包，它为webpack动态生成的包注入链接和脚本标签。
webpack-bundle-tracker插件将有关webpack编译过程的必要信息发送到一个django-webpack-loader可以使用的json文件中。
为了让webpack跟踪您的应用程序中的更改，您需要创建一个服务器来监控您的React应用程序中的更改，并捆绑您的JS。
注意:我们使用节点服务器。
// Webpack Server
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.server.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline: true,
historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
if (err) {
console.log(err)
}
console.log('Listening at 0.0.0.0:3000')
});webpack.server.js使用的配置文件位于webpack.server.config.js
// webpack.server.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
entry: {
main: './frontend/src/index.js',
devServer: 'webpack-dev-server/client?http://localhost:3000'
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/bundles/'),
publicPath: 'http://localhost:3000/frontend/static/frontend/bundles/', // django-webpack-loader overrides django's STATIC_URL with this path
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
devServer: {
contentBase: './frontend/static/frontend/bundles/',
},
};请注意，默认情况下，服务器会将捆绑包保留在内存中，而不会写入磁盘
当服务器停止时，将不会有捆绑文件的迹象，因为它们没有编译到内存中。
要在开发过程中将文件构建到内存中，请在webpack.dev.config.js处创建另一个配置文件
// webpack.dev.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
entry: {
main: './frontend/src/index.js',
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/bundles/'),
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
};在构建用于生产的文件时，请在webpack.prod.config.js上创建另一个配置文件
// webpack.prod.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'production',
entry: {
main: './frontend/src/index.js',
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/dist/'),
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats-prod.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
};在你的Django设置中，；
import sys
import os
# Assuming this is your base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Also assuming this is your base directory
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
# In development
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), # Path to 'webpack-stats.json'
}
}
# In production
if not DEBUG:
WEBPACK_LOADER['DEFAULT'].update({
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json') # Path to 'webpack-stats-prod.json'
})
INSTALLED_APPS = (
...
'webpack_loader',
)你的index.html现在应该是这样的；
{% load render_bundle from webpack_loader %} <<< Add this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django-React</title>
</head>
<body>
<div id="app" class="columns">
<!-- React -->
</div>
{% render_bundle 'main' %} <<< Add this.
</body>
</html>现在，你的package.json应该是这样的；
"scripts": {
"dev": "node ./webpack.server.js",
"build-dev": "webpack --mode development --config ./webpack.dev.config.js",
"build-prod": "webpack --mode production --config ./webpack.prod.config.js"
}因此，要使用自动捆绑进行开发，只需运行：
npm运行开发
要在停止webpack服务器后将文件构建到内存中，只需运行：
npm运行构建开发
最后，要使用生产优化进行构建，只需运行：
npm运行构建-生产
我试着对你的项目进行修改，感觉根据你的项目结构进行调整。请查看以下参考资料，以便更好地指导您。他们帮了我大忙！
参考文献：
- Let's modernize the way we handle frontend code with Django
- Using Webpack transparently with Django + hot reloading React components as a bonus
- Modern Django: Part 1: Setting up Django and React
https://stackoverflow.com/questions/55277418
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号