javascript - 使用 React 和 Django 处理许多 html 文件

Question

我有一个混合 django+react 实现。 Django 渲染初始 HTML，然后 React 进行控制。但是，URL 由 Django 管理。

在react中，index.js文件应该对应一个html，对吗？如果我错了，请纠正我。因此，如果我有多个需要 React 的 HTML 文件，这是正确的方法。我的 index.js 文件如下所示:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { EfestoComponent, WorkTimeComponent, AresComponent } from './components/pulseHome';
import { PulseComponent} from "./components/pulseHistory";

import reportWebVitals from './reportWebVitals';

const efestosData = JSON.parse(document.getElementById('efestos-data').textContent);

const efesto = ReactDOM.createRoot(document.getElementById('efesto'));
const worktime = ReactDOM.createRoot(document.getElementById('worktime'));
const ares = ReactDOM.createRoot(document.getElementById('ares'));

const pulse = ReactDOM.createRoot(document.getElementById('pulse'));


efesto.render(
  <EfestoComponent objects={efestosData}/>
);

worktime.render(
    <WorkTimeComponent/>
)

ares.render(
    <AresComponent/>
)

pulse.render(
    <PulseComponent/>
)

如您所见，efesto、worktime 和 ares 组件属于 1 个名为pulseHome 的 js 文件，它保存了名为 pulse_home.html 的文件的组件。然后，脉冲组件位于pulseHistory js 文件中，该文件保存pulse_history.html 的组件。当我访问这两个 html 中的任何一个时，都会引发错误:

Uncaught TypeError: document.getElementById(...) is null

当然，因为第一个元素不存在于第二个 html 中，反之亦然。我可以用一些 hacky 代码来解决它(AI 建议创建另一个 index2.js 文件)，但必须有一个正确且标准的方法。我对 React 有点陌生。任何建议都会有帮助。

Answer 1

我可以建议两种可能对您有所帮助的解决方案:

1. 创建 HTML 文件时在服务器上使用统一的元素 id，就像 React 那样。默认情况下，React 会查找具有 app id 的 div 组件来呈现应用程序。您可以使用唯一的 ID 集在服务器上生成 HTML 文件。例如，您必须使用 efestos-data id 才能出现在您的所有 HTML 文件中

2. 如果第一个选项对您来说不可行，您可以迭代初始文档以获取动态 ID 并使用它们来渲染您的 React 组件。根据服务器生成初始 HTML 文件的方式，这会很棘手。

就我个人而言，我认为你使用 React 的方式是错误的，也许你可以重新考虑你的整个设计，如果你需要服务器端渲染并且也想使用 React，也许可以考虑使用 nextjs .