我只想将 React 组件添加到 Django 的模板 html 文件中(不要将整个模板替换为 React 作为前端，因为互联网上有很多教程，只是网站的某些部分)，因为网站的那部分需要高交互性，更容易编写它在 React 中。
我关注了Add React to a Website添加 JSX 预处理器的教程。我这样设置项目。
/app-a
/static
/app-a <-- preprocessed files are here
/templates
/app-a
index.html <-- Django template file that I want to include a react component to
/app-b
/react <-- this is where I wrote JSX files
manage.py
package.json
并在 index.html 文件的末尾包含这样的 React 文件。
<html>
<body>
<div id="formContainer">
</div>
<!-- React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- my root React component file -->
<script src="{% static 'app-a/App.js' %}"></script>
</body>
我跑了
babel --watch像这样预处理 JSX 文件npx babel --watch ./react --out-dir ./app-a/static/app-a --presets react-app我认为它有效，因为每当我保存 JSX 组件文件时，它们都会被预处理并输出到 /app-a/static/app-a .在根 JSX 文件的末尾，我像这样将根 React 组件包含到 DOM 中。
import React, { Component } from 'react';
... import bunch of components
class App extends Component { ... }
const formContainer = document.querySelector('#formContainer');
ReactDOM.render(App, formContainer);
不幸的是，当我打开网站时，出现错误
Uncaught SyntaxError: Unexpected identifier在 import React, { Component } from 'react';来自预处理的根 React 组件文件。如果我删除
React从导入语句(直接在预处理文件中)，我得到错误 Uncaught SyntaxError: Unexpected token {如果我删除第一个导入行，我会在下一个导入行得到相同的 Unexpected identifier 错误。所以，我认为网络浏览器有问题
import陈述。我认为 babel 应该负责将 JSX 文件中的所有内容转换为能够在 Web 浏览器上运行的 JS 文件。
我确定我的 JSX 文件是正确的，因为在将所有 JSX 文件复制到 django 项目之前，我在 Create React App 项目中编写了这些组件。
那么，我应该怎么做才能将 React 组件添加到我的网站？
最佳答案
我不得不处理这个确切的问题。我只需要向页面添加一个 react 组件即可。大多数在线教程都建议将 React 和 Django 解耦，这对于我正在从事的项目来说是不可行的。一种更简单的方法似乎是创建一个新应用程序来包含 react 组件并将其添加到 INSTALLED_APPS在您项目的 settings.py所以webpack生成的静态文件被django发现了。
设置 yarn 或 npm 并安装一些转换代码所需的依赖项和开发依赖项。您可以使用您选择的捆绑器，我使用的是 webpack，因为它是最受欢迎的:
cd react_component (or wherever your new project is)
yarn init -y
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli
yarn add react react-dom
webpack.config.js在您的应用程序目录中包含以下内容:const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'static_src', 'index.js'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
output: {
path: path.resolve(__dirname, 'static', 'react_component'),
filename: 'bundle.js',
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
};
.babelrc在同一目录中:{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
static_src用于存储 JavaScript 文件的目录，以及 static webpack 生成的捆绑文件的目录。创建
static_src/index.js并渲染你的根组件:import React from 'react';
import ReactDOM from 'react-dom';
import Component from "./Component";
ReactDOM.render(<Component/>, document.getElementById('component-root'));
npx webpack在 react_component/用于编译文件并生成 bundle.js 的目录您可以将其包含在项目中的任何位置，如下所示:{% load static %}
<div id="component-root"></div>
<script src="{% static 'react_component/bundle.js' %}"></script>
关于javascript - 如何将 React 组件添加到现有的 Django 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51452593/