当前位置: 首页 > news >正文

react 组件导入

react 组件导入

Posted on 2026-04-02 09:28  打杂滴  阅读(0)  评论(0)    收藏  举报

在 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>
  );
}
 

image

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

 

 

导出和导入一个组件