React 之 组件模块依赖

本文主要是介绍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><imgsrc="https://i.imgur.com/QIrZWGIs.jpg"alt="Alan L. Hart"/>);
}

这篇关于React 之 组件模块依赖的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---