reactjs 为什么ReactDOM的这个阅读为undefined?

yshpjwxd  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(141)

我试着建立一个基本的React脚本

const subTable = document.getElementById("sub-table");
import React from "react";
import ReactDOM from "react-dom";

 console.log (subTable);
  const App = () => {
    return <div>Hello World!</div>;
  };

  ReactDOM.render(<App />, subTable);

我最初只是使用包含react和react-dom的@wordpress/scripts,但后来我也尝试直接安装它们,所以现在我的包显示:

"@wordpress/scripts": "^25.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

但是,我不想有两个副本,所以我卸载了react-dom,现在只使用它作为我当前的json

"devDependencies": {
    "@tailwindcss/typography": "^0.5.7",
    "@wordpress/scripts": "^25.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.0",
    "prettier-plugin-tailwindcss": "^0.2.0",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "axios": "^1.2.0",
    "flowbite": "^1.5.4",
    "tw-elements": "^1.0.0-alpha13"
  }

读取ID时,console.log会显示以下内容

<div id="sub-table"></div>

所以我很困惑。有什么建议吗?为什么我会得到这个错误
无法读取未定义的属性(读取"render")
更新:
已卸载flowbite和tw-element以确保其JS不会干扰。当前json:

"devDependencies": {
    "@tailwindcss/typography": "^0.5.7",
    "@wordpress/scripts": "^25.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.0",
    "prettier-plugin-tailwindcss": "^0.2.0",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "axios": "^1.2.0"
  }

仍在获取未定义的渲染
更新2:
我注意到react和react-dom在我的JS之前加载,所以我在入队中设置了优先级,现在我的JS在后面加载。
这似乎已经解决了问题!

wj8zmpe1

wj8zmpe11#

看起来react-dom没有默认的import,只有命名的import。

import * as ReactDOM from 'react-dom';
fivyi3re

fivyi3re2#

react和react-dom文件在我的JS文件之前加载,我只需要改变加载顺序

相关问题