reactjs 嗨,我是新的React,并试图根据组件[关闭]

gev0vcfq  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(84)

这个问题是由错字或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
昨天就关门了。
Improve this question
我试图创建一个标题,我已经在一个组件文件夹中创建了一个Header.js文件,该文件由这个组成。

export default function Header() {
   return(
       <h1 className="header-title">Just Because</h1>
   );
}

字符串
我在App.js中导入并调用我的Header()

import logo from './logo.svg';
import './App.css';
import {Header} from './components/Header.js';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Header/>
      </header>
    </div>
  );
}

export default App;


当前我收到此错误消息

    • 创建根目录(...):目标容器不是DOM元素。在createRoot(http://localhost:3000/static/js/bundle.js:31288:15)在对象中创建根目录$1 [作为创建根目录]创建根目录时,请使用以下链接:(请访问:)。(http://localhost:3000/static/js/bundle.js:222:60)中的所有数据库,请参阅选项。(http://localhost:3000/static/js/bundle.js:41776:31)中的所有内容,请访问:webpack_require(位于)。

我知道它说Header不是DOM(文档对象模型)但不了解原因?最初有一个错误,如**export 'Header'(汇入为'信头')在'./components/Header.js'中找不到(可能的出口:默认)**但是我发现了这个帖子import error: 'Header' is not exported from 'components/Header'并且我删除了"默认",但我发现自己在兜圈子。任何建议都将不胜感激

vshtjzan

vshtjzan1#

看起来你在Header.js中使用了导出默认语法来导出你的Header组件,但是你在App.js中使用了花括号来导入它。当使用导出默认语法时,你应该不使用花括号来导入它。

去掉花括号

import {Header} from './components/Header.js';

字符串

以下是App.js中正确的import语句:

import Header from './components/Header.js';


确保更新App.js中的import语句,如上图所示,并查看问题是否得到解决。

9nvpjoqh

9nvpjoqh2#

如果你将头导出为默认值,你可能需要这样写:

import Header from "./components/Header.js";

字符串

相关问题