React 组件不在 root 中呈现答案

【问题标题】：React component not rendering in rootReact 组件不在 root 中呈现
【发布时间】：2023-02-02 10:05:16
【问题描述】：

我正在尝试使用 React 显示一个简单的表单，但我收到错误“目标容器不是 DOM 元素”，尽管根元素肯定是 DOM 元素，因为我已经使用控制台进行了检查。

编辑：导入表单'react-dom'并使用'render'工作正常但我似乎无法以其他方式让它工作

这是表单组件

import React from 'react';

export default function StudentForm()
{
  return (
            <form>
                //some stuff
            </form>
          )
}

我的索引文件

import ReactDOM from 'react-dom/client';
import './index.css';
import StudentForm from './App';



const root = document.getElementById('root');


ReactDOM.createRoot(<StudentForm/>,root);

这是我的 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
   
    <noscript>You need to enable JavaScript to run this app.</noscript>
    
    <div id="root"></div>
  </body>
</html>

【问题讨论】：

您的index.html 文件是什么样的？ ReactDOM是从'react-dom/client'导出的还是只是react-dom？
我已经编辑了问题来解决这个问题并包含了 index.html 文件，感谢您的回复

标签： javascript reactjs rendering

【解决方案1】：

我猜你的 index.html 中没有 id root 的元素，请在你的 index.html 中添加以下标签，

<div id="root" />

【讨论】：

我确实在 index.html 中有根元素，我更新了问题以也包含该文件。无论如何感谢您的回应

【解决方案2】：

尝试这个：

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <StudentForm />
  </React.StrictMode>
)

【讨论】：