正文从这开始~

总览

在React中,从其他文件中导入组件:

  1. A文件中导出组件。比如说,export function Button() {}
  2. B文件中导入组件。比如说,import {Button} from './another-file'
  3. 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.jsApp.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技巧之导入组件的更多相关文章

  1. React组件导入的两种方式(动态导入组件的实现)

    一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...

  2. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  3. 如何实现 React 模块动态导入

    如何实现 React 模块动态导入 React 模块动态导入 代码分割 webpack & code splitting https://reactjs.org/docs/code-split ...

  4. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  5. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  6. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  7. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  8. React Native 学习-组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  9. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

随机推荐

  1. Java-GUI编程之ImageIO的使用

    在实际生活中,很多软件都支持打开本地磁盘已经存在的图片,然后进行编辑,编辑完毕后,再重新保存到本地磁盘.如果使用AWT要完成这样的功能,那么需要使用到ImageIO这个类,可以操作本地磁盘的图片文件. ...

  2. 自定义制作SpringBoot启动图案

    自定义制作SpringBoot启动图案 一.首先在SpringBoot项目的resources的目录下新建banner.txt文件 二.自定义启动图案 自定义启动图案地址 三.将生成的图形复制粘贴到b ...

  3. python selenium 多个页面对象类使用同一个webdriver(即只打开一个浏览器窗口)

    1 class BasePage(): 2 """selenium基类""" 3 4 def __init__(self, driver=N ...

  4. Halo 开源项目学习(七):缓存机制

    基本介绍 我们知道,频繁操作数据库会降低服务器的系统性能,因此通常需要将频繁访问.更新的数据存入到缓存.Halo 项目也引入了缓存机制,且设置了多种实现方式,如自定义缓存.Redis.LevelDB ...

  5. Linux服务器安全加固10条建议

    以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过. 设置复杂密码 服务器设置大写.小写.特殊字符.数字组成的12-16位的复杂 ...

  6. 定时 ——setTimeout | setInterval

    使用场景,setTimeout 只调用一次,setInterval 会重复调用,直到清除或重载. <div id="countDown"></div> &l ...

  7. 【mq】从零开始实现 mq-12-消息的批量发送与回执

    前景回顾 [mq]从零开始实现 mq-01-生产者.消费者启动 [mq]从零开始实现 mq-02-如何实现生产者调用消费者? [mq]从零开始实现 mq-03-引入 broker 中间人 [mq]从零 ...

  8. Java多线程编程实战02:多线程编程模型

    多线程编程模型 线程安全名词 串行.并发和并行 串行:一个人,将任务一个一个完成 并发:一个人,有策略地同时做多件事情 并行:多个人,每人做一个事情 竞态 名词 竞态:计算结果的正确性与时间有关的现象 ...

  9. vscode修改括号对颜色,自定义括号颜色

    新版的vscode 1.67(2022年4月更新的版本),自带括号颜色匹配,十分的方便. 至于怎么开启,已经有人写过,这里就不写了,更新到新版默认开启~ 括号颜色默认只有3种颜色,有时候感觉不够用. ...

  10. unity---存档方法PlayerPrefs

    存档方法 PlayerPrefs 利用键值对的存储方式 存值的方法: PlayerPrefs.SetString("Name",t);//SetInt,SetFloat 取值的方法 ...