React技巧之导入组件
正文从这开始~
总览
在React中,从其他文件中导入组件:
- 从
A
文件中导出组件。比如说,export function Button() {}
。 - 在
B
文件中导入组件。比如说,import {Button} from './another-file'
。 - 在
B
文件中使用导入的组件。
命名导入导出
下面的例子是从一个名为another-file.js
的文件中导入组件。
// ️ named export
export function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// ️ named export
export const SmallButton = () => {
return (
<button onClick={() => console.log('small button')}>Small button</button>
);
};
下面是我们如何从一个名为App.js
文件中导入组件。
// ️ named import
import {BigButton, SmallButton} from './another-file';
export default function App() {
return (
<div>
<BigButton />
<hr />
<SmallButton />
</div>
);
}
如有必要,请确保当前路径指向another-file.js
模块。上面的例子假设another-file.js
和App.js
位于相同的目录下。
举例来说,如果another-file.js
位于上层目录,你必须这样导入:import {BigButton} from '../another-file'
。
在导入组件时,我们使用大括号包裹组件名称。这被称为命名导入。
import/export
语法被称为JavaScript模块。为了能够从不同的文件中导入一个组件,必须使用命名的或默认的导出方式将其导出。上述例子使用了命名导出和导入。
命名和默认导入导出的主要不同之处在于,在每个文件中,你可以有多个命名导出,但只能有一个默认导出。
默认导入导出
让我们看一个例子,看看我们如何导入一个使用默认导出的组件。
// ️ default export
export default function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
很重要:如果你导出一个变量(或者箭头函数)作为默认导出,你必须先声明再导出。你不能在同一行内声明变量同时默认导出变量。
const BigButton = () => {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// ️ default export
export default BigButton;
下面是如何使用默认导入来导入组件。
// ️ default import
import BigButton from './another-file';
export default function App() {
return (
<div>
<BigButton />
</div>
);
}
当导入组件时,我们也可以使用不同的名字,比如Foo
。
// ️ default import
import Foo from './another-file';
export default function App() {
return (
<div>
<Foo />
</div>
);
}
这样也会生效,但会令人疑惑,因此应该避免。
根据我的经验,大多数现实世界的代码库只使用命名的导出和导入,因为它们更容易利用你的IDE进行自动完成和自动导入。 你也不必考虑哪些成员是用默认导出或命名导出的。
混合导入导出
你也可以混合匹配,下面示例的文件使用了默认导出和命名导出。
// ️ default export
export default function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// ️ named export
export const SmallButton = () => {
return (
<button onClick={() => console.log('small button')}>Small button</button>
);
};
下面是如何导入这两个组件。
// ️ default and named imports
import BigButton, {SmallButton} from './another-file';
export default function App() {
return (
<div>
<BigButton />
<hr />
<SmallButton />
</div>
);
}
我们使用默认导入来导入BigButton
组件,使用命名导入来导入SmallButton
组件。
请注意,每个文件只能有一个默认导出,但你可以根据需要有多个命名导出。
React技巧之导入组件的更多相关文章
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- React 之 高阶组件的理解
1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
- 如何实现 React 模块动态导入
如何实现 React 模块动态导入 React 模块动态导入 代码分割 webpack & code splitting https://reactjs.org/docs/code-split ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React和Vue的组件更新比较
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- React Native 学习-组件说明和生命周期
组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...
- React:快速上手(2)——组件通信
React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...
随机推荐
- QGIS 3.14插件开发——Win10系统PyCharm开发环境搭建四步走
前言:最近实习要求做一个QGIS插件,网上关于QGIS 3.14插件开发环境搭建的文档不多,而且也不算太全面.正好实习的时候写了一个文档,在这里给大家分享一下. 因为是Word转的Markdown,可 ...
- C/C++指针、函数、结构体、共用体
指针 变量与地址 变量给谁用的? 变量是对某一块空间的抽象命名. 变量名就是你抽象出来的某块空间的别名. 指针就是地址.指向某个地址. 指针与指针变量 指针是指向某块地址.指针(地址)是常量. 指针变 ...
- 微信小程序绑定函数如何携带参数
一开始以为微信小程序的语法是和VUE的语法一样的,直接@click="click(field)",结果却不是这样的 在微信小程序中我们需要设置一个 data-set ,然后在绑定的 ...
- Red Hat牵头推进NVFS文件系统
开源Linux 长按二维码加关注~ 上一篇:Linux中几个正则表达式的用法 由 Red Hat 工程师牵头的团队,正在为 Linux/开源社区研究名为 NVFS 的文件系统.NVFS 的目标是成为像 ...
- mysql5.6 innodb_large_prefix引起的一个异常
phenomenon: Specified key was too long; max key length is 3072 bytes 在修改一个数据库字段时,字段容量被限制为了表前缀的大小而不是本 ...
- slice-substring-substr-split-splice
一.字符串slice(startIndex, endBeforeIndex) endBeforeIndex < 0,则 endBeforeIndex 为 负数,第二个参数为字符串长度加上负值,之 ...
- Java 15 新特性:隐藏类
什么是隐藏类 隐藏类,是一种不能被其他类直接使用的类.引入隐藏类的主要目的是给框架来使用,使得框架可以在运行时生成类,并通过反射间接使用它们.可能有点抽象,不要紧,下面我们通过一个例子来直观的认识它! ...
- 女朋友面试回来抱怨说会redis,面试官问了一堆redis
Redis 优缺点及特点 什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,类似MemoryCache,整个数据库统统加载在内存当中进行操作,定期通过异步操 ...
- 日期和时间API - 读《Java 8实战》
日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期 LocalDate date1 = LocalDate.of(2014, 3, 18); // 读取 ...
- 594. Longest Harmonious Subsequence - LeetCode
Question 594. Longest Harmonious Subsequence Solution 题目大意:找一个最长子序列,要求子序列中最大值和最小值的差是1. 思路:构造一个map,保存 ...