Reactjs 在React js中呈现多个组件

社区中，我从一个页面呈现了多个组件，我遇到的问题是：

[./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'.]

有人能告诉我为什么吗

App.js

import "./App.css";
import { Home, Page, Greeting } from "./components/Home";
function App() {
  return (
    <div className="App">
      <Home />
      <Page />
      <Greeting />
    </div>
  );
}

export default App;

导入“/App.css”； 从“/components/Home”导入{Home，Page，Greeting}； 函数App（）{ 返回( ); } 导出默认应用程序； Home.js

import React, { Component } from "react";
import React from "react";

class Home extends Component {
  render() {
    return (
      <div className="box">
        <h1>Its a box man!</h1>
      </div>
    );
  }
}
class Page extends Component {
  render() {
    return (
      <div className="box">
        <h1>Its a second box man! from the other Component</h1>
      </div>
    );
  }
}

const Greeting = () => {
  return <h1>Hello again</h1>;
};

export { Home, Page, Greeting };

import React，{Component}来自“React”；
从“React”导入React；
类Home扩展组件{
render（）{
返回(
它是一个盒子人！
);
}
}
类页面扩展组件{
render（）{
返回(
它是另一个盒子里的人！来自另一个组件
);
}
}
常量问候语=（）=>{
再次打招呼；
};
导出{主页、页面、问候语}；

*目的是从同一页练习两个组件，而不是仅仅将它们分开。

更改

const Greeting = () => {
  return <h1>Hello again</h1>;
};

const问候语=（）=>{
再次打招呼；
};

到

export const Greeting=（）=>{
再次打招呼；
};

---

您的问题应该得到解决

请在

Home.js

中尝试。如果将模块导出为默认值，则可以不带括号导入

{}

。但是如果导出时没有默认设置，则必须使用括号进行导入

export default { Home, Page, Greeting };

---

我测试了你的代码，没有问题，除非这些不是打字错误：

• 您尚未在App.js中导入react
• 您已经在Home.js中导入了两次react

我能想到的唯一问题是你忘记保存

Home.js

。 如果已保存

Home.js

：

使用

ctrl+c

退出您的dev服务器，然后再次启动它，看看问题是否得到解决

尝试删除问候语组件，如果仍然出现错误，请告知我们

---

尝试在Home.js中逐个导出所有组件，如下所示：

出口类家庭。。。 导出类页面。。。 导出常量问候语

然后删除这一行：

---

导出{主页、页面、问候语}

错误是？抱歉，我忘记了。/src/App.js尝试导入错误：“问候语”不是从“/components/Home”导出的。只需添加导出。。。Export const greeting您的代码运行完全正常，无需添加默认值或任何其他导出。我亲自测试过。你错过了别的东西。你能展示你的项目结构吗？另外，您正在导入React两次。我删除了其中一个，但仍然不起作用。不幸的是，它不起作用。请按照@Prime所说的“导出默认值{Home，Page，Greeting}”，并在此处发布错误（如果出现任何不起作用的错误），以发布您在收到建议后面临的错误。更改后需要准确的错误---最新更新---，问题得到解决，Spactex也得到了

导出默认值

和

导出

的推理它没有解决问题，我解决了，但对我来说没有意义。我将其中一个作为默认值导出，另外两个在{}中导出，并将它们导入App.js中。默认值在一行中，另外两个{}中，它工作了，但没有意义。检查本文。它会给你更多的解释。：）你能把这篇文章的解释添加到你的答案中吗？这样的话，如果文章离线，这个答案仍然会有那个有用的解释。

export default { Home, Page, Greeting };