React 之 组件模块依赖
导入（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"
/>
);
}
原文地址：https://blog.csdn.net/qq_35876316/article/details/138205828
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！