React多组件渲染报错：'Greeting'未从'./components/Home'导出，求解答

嘿，我帮你定位到问题啦！你的代码里藏着一个容易忽略的小问题——Home.js里重复导入了React，这干扰了模块解析逻辑，导致后续的导出语句没被正常识别，所以App.js才会报错找不到Greeting的导出。

问题代码分析 #

看你的Home.js开头部分：

import React, { Component } from "react";
import React from "react"; // 这里是多余的重复导入！

你已经通过第一行导入了React和Component，第二行又重复导入React，这会让打包工具（比如Webpack）或Babel对模块的解析出现异常，直接导致后面的export { Home, Page, Greeting };无法被正确处理，最终App.js里的解构导入就找不到Greeting了。

修复步骤 #

只需要删掉第二行重复的import React from "react";，保留第一行的导入即可：

// Home.js 修正后的开头
import React, { Component } 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 };

保存文件后重新运行项目，这个导入错误应该就会消失啦！

额外小贴士 #

• 在React 17及以后的版本中，函数组件可以不用显式导入React，但类组件还是需要导入Component（或者写成class Home extends React.Component），保留统一的导入方式会让代码更一致。
• 你用的「同一文件导出多个组件+解构导入」的写法是完全正确的，只要模块没有语法错误，这种方式非常适合练习组件的导出导入逻辑。

内容的提问来源于stack exchange，提问作者user11286508