React新手问询：如何在单个页面中展示多个组件？

嘿，作为React新手能想到这个问题真的很棒！当然可以在单个页面里同时展示多个组件，这正是React组件化开发的核心优势之一——把页面拆分成独立可复用的小模块，再按需组合到一起。下面我来一步步教你怎么实现，顺便帮你排查可能遇到的常见问题～

基础实现步骤 #

1. 确保你的组件正确定义并导出 #

首先，你的About.js需要是一个合法的React组件，并且正确导出：

// About.js
import React from 'react';

// 定义函数式组件
function About() {
  return (
    <div className="about-container">
      <h2>关于页面</h2>
      <p>这里是About组件的内容</p>
    </div>
  );
}

// 导出组件，这样其他文件才能导入使用
export default About;

2. 在主组件（比如App.js）中导入并渲染多个组件 #

打开你的App.js，导入About组件，然后在return的JSX里直接插入这个组件标签就可以了：

// App.js
import React from 'react';
import About from './About'; // 导入About组件，注意路径要正确

function App() {
  return (
    <div className="app-container">
      {/* App组件自身的内容 */}
      <h1>欢迎来到我的React应用</h1>
      <p>这是App组件的核心内容区域</p>

      {/* 直接渲染About组件，就像使用HTML标签一样 */}
      <About />
    </div>
  );
}

export default App;

3. 确认index.js的渲染逻辑 #

你的index.js只需要正常渲染App组件就好，因为App已经包含了About组件：

// index.js
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>
);

这样启动项目后，你就能在同一个页面看到App和About的内容啦！

常见错误排查（针对你提到的控制台报错） #

如果控制台出现错误，大概率是以下几种情况：

• 导入路径错误：比如About.js在src/components文件夹里，你却写成了import About from './About'，这时候要改成import About from './components/About'；另外注意React对文件路径的大小写敏感，比如about.js和About.js是两个不同的文件。
• 组件未正确导出：忘记写export default About，导致导入时找不到组件。
• 组件使用方式错误：比如写成<About>而不是<About />（自闭合标签）或者<About></About>，JSX要求所有标签必须闭合。

如果还有其他具体的错误提示，可以把错误信息贴出来，我再帮你针对性解决～

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