如何在App.js中导入组件及解决导入后页面未显示的问题？

一、正确导入组件到App.js的步骤 #

1. 确认组件文件路径
   假设组件文件放在src/components目录下（如FunctionalComponent.js和ClassComponent.js），在App.js中根据相对路径导入：

   • 若组件是默认导出（定义时用export default）：

     import FunctionalComponent from './components/FunctionalComponent';
     import ClassComponent from './components/ClassComponent';
     

   • 若组件是命名导出（定义时直接加export）：

     import { FunctionalComponent } from './components/FunctionalComponent';
     import { ClassComponent } from './components/ClassComponent';
     

2. 在App组件中使用导入的组件
   无论App是函数式还是类组件，都要在渲染的JSX中添加组件标签：

   • 函数式App组件示例：

     function App() {
       return (
         <div className="App">
           <FunctionalComponent />
           <ClassComponent />
         </div>
       );
     }
     export default App;
     

   • 类组件App示例：

     import React from 'react';
     class App extends React.Component {
       render() {
         return (
           <div className="App">
             <FunctionalComponent />
             <ClassComponent />
           </div>
         );
       }
     }
     export default App;
     

二、App.js元素不显示的排查与解决 #

网页仅显示index.js内容，核心原因是index.js未正确渲染App组件，按以下步骤排查：

1. 检查index.js的代码结构
   确保index.js中正确导入并渲染App组件，标准代码如下：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
   

   如果你的index.js直接渲染了其他元素（比如root.render(<h1>Hello from index</h1>)），替换成上述代码即可。

2. 验证App组件的正确性

   • 确保App组件的return（函数式）或render（类组件）中有合法JSX：必须用单个根元素包裹（可用<div>、<>空Fragment或<React.Fragment>），否则会导致渲染失败。
   • 确认App组件已通过export default App正确导出。

3. 其他排查点

   • 检查组件文件是否正确导出：确认组件文件中有export default或export语句。
   • 重启开发服务器：缓存可能导致修改不生效，执行ctrl+c终止服务后重新运行npm start或yarn start。

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