javascript React组件未在根中呈现

svmlkihl 于 2023-02-02 发布在 Java

关注(0)|答案(3)|浏览(118)

我试图使用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>

JavaScript

来源：https://stackoverflow.com/questions/74700972/react-component-not-rendering-in-root

3条答案

按热度按时间

vbkedwbf1#

我猜您的index.html中没有id为root的元素，请在index.html中添加以下标记：
<div id="root" />

赞(0）回复(0）举报 2023-02-02

gxwragnw2#

试试这个：

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

赞(0）回复(0）举报 2023-02-02

ss2ws0br3#

您需要将主脚本或索引脚本添加到HTML中。

<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>

赞(0）回复(0）举报 2023-02-02

我来回答

javascript React组件未在根中呈现

3条答案

相关问题

热门标签

最新问答