React 之组件模块依赖（三）

**之火

已于 2024-04-30 09:32:41 修改

阅读量445

点赞数 1

分类专栏： React 文章标签： react.js 前端前端框架

于 2024-04-26 09:34:50 首次发布

本文链接：https://blog.csdn.net/qq_35876316/article/details/138205828

版权

React 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在React项目中使用导出（export）和导入（import）功能来组织大型文件，以及如何使用JSX语法创建和管理组件。通过实例展示如何在Gallery.js和Profile.js组件间进行依赖管理。

摘要由CSDN通过智能技术生成

导入（Import）和导出（exporing）组件

在一个文件中声明多个组件，但是文件变得太大的话就不方便查看了。要解决此问题，你可以将一个组件放到一个单独的文件中并（导出） export
组件，然后在另一个文件中（导入） import 该组件。

每个 React 组件就是 JavaScript 函数，函数中可以书写 markup，这些 markup 将由 React 渲染到浏览器中。React 组件使用名为 JSX 的语法扩展来支持 markup。JSX 看上去就像 HTML 一样，但它的语法比较严格，并且可以显示动态信息。

如果我们将现有的 HTML markup 粘贴到 React 组件中，可能会报错：
组件之间的依赖代码栗子：

Gallery.js 文件
//导入应该一个组件Profile
import Profile from './Profile.js';
//导入自己，命名Gallery
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Profile.js 文件
const person = {
  name: 'Gregorio',
};
//可以在 JSX 中使用大花括号插入变量
export default function Profile() {
  return (
  	<>
	  	<h1>{person.name}'s Todos</h1>
	    <img
	      src="https://i.imgur.com/QIrZWGIs.jpg"
	      alt="Alan L. Hart"
	    />
   </>
  );
}