在 React 中,根组件(Root Component)是应用的入口组件,也是整个 React 组件树的起点。它通常被渲染到 HTML 文档中的一个特定 DOM 元素上,比如 index.html 文件中的 <div id="root"></div> 元素。
根组件的主要作用是组织和渲染其他子组件。它负责将应用的不同部分组合在一起,形成一个完整的用户界面。在典型的 React 应用中,根组件通常被命名为 App.js,并定义为一个函数组件或类组件。
根组件文件
创建了一个 Profile 组件,并且渲染在 Gallery 组件里。
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>了不起的科学家们</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}

在此示例中,所有组件目前都定义在 根组件 App.js 文件中。具体还需根据项目配置决定,有些根组件可能会声明在其他文件中。如果你使用的框架基于文件进行路由,如 Next.js,那你每个页面的根组件都会不一样。
导出和导入一个组件
