导入 ReactDOM 未定义，

发布于 2025-01-14 08:14:27 字数 2424 浏览 0 评论 0原文

我正在与 Bob Ziroll 一起学习有关 React 的 Scrimba 教程，并且已经了解了我必须为 React 设置本地环境。我通过 npm 安装没有遇到任何问题，但现在收到以下错误：

未捕获的引用错误：ReactDOM 未定义 js索引.js:52 工厂反应刷新：6

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <main id="root"></main>
   
        <script src="index.js" type="module"></script>
    </body>
</html>

    import React from "react"
    import ReactDOM from "react-dom"
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
        )
    }
    ReactDOM.render(<ThePage />, document.getElementById("root"));

如果我从脚本标签中删除 type="module"，我会收到以下错误：

未捕获的语法错误：导入声明只能出现在模块的顶层

我的附加导入的内容均以以下内容开头：

import React from "react"
export default function TheFooter(){...

我尝试通过 npx 重新安装react&react-dom，但它似乎没有修复任何问题？

感谢您的回复并感谢您对我的帮助。

编辑，Package.JSON：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

原文

Error received

I am following a Scrimba Tutorial on React with Bob Ziroll, and I have gotten to the point where I have to set up a local environment for React. I had no issues with installing via npm but I now receive the following error:

Uncaught ReferenceError: ReactDOM is not defined
js index.js:52
factory react refresh:6

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <main id="root"></main>
   
        <script src="index.js" type="module"></script>
    </body>
</html>

    import React from "react"
    import ReactDOM from "react-dom"
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
        )
    }
    ReactDOM.render(<ThePage />, document.getElementById("root"));

If I remove type="module" from my script tag I get the following Error:

Uncaught SyntaxError: import declarations may only appear at top level of a module

The contents of my additional imports all start with the following:

import React from "react"
export default function TheFooter(){...

I tried reinstalling react&react-dom via npx but it doesn't seem to fix anything?

I appreciate your responses and thanks for helping me out.

edit, Package.JSON:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芯好空 2025-01-21 08:14:27

你必须从react-dom导入render方法，而不是ReactDOM本身。

import {render} from "react-dom"; 然后用它来渲染你的根元素

，你应该总是从组件返回单个根节点，你可以使用 div 或反应片段包装你的组件像这样实现

 import React from "react"
    import {render} from "react-dom";
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <>
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
            </>
        )
    }
    render(<ThePage />, document.getElementById("root"));

You have to import the render method from react-dom, not the ReactDOM itself.

import {render} from "react-dom"; and then use it to render your root element

and you should always return the single root node from the component you can wrap you component useing div or react fragment to achieve that like this

 import React from "react"
    import {render} from "react-dom";
    import TheHeader from "./header.js"
    import TheFooter from "./footer.js"
    import TheList from "./list.js"
    //import TheHeader from ./header
    
    function ThePage(){
        return(
            <>
            <div>
            <TheHeader />
            <TheList />
            <TheFooter />
            </div>
            </>
        )
    }
    render(<ThePage />, document.getElementById("root"));

回复收藏 0 原文

诗酒趁年少 2025-01-21 08:14:27

你的代码很好：有几件事需要注意，我在下面说明了它们：
尝试改变：

) 到 (

另外，您只需导入（ReactDOM）通常执行的操作

import ReactDOM from 'react-dom'

并使用

ReactDOM.render({...})

在此处输入图像描述
我附上了一张图片，以便您看到您的代码运行良好

祝您学习顺利；）

Your code was just fine: a couple of things to take care I stated them below:
try to change the:
<main id="root"></main>) to (<div id="root"></div>
also, you just can import the (ReactDOM) normally doing