学习笔记——react公共组件与组件跳转

66 阅读 0 评论 44 点赞

我是靠谱客的博主无私香水，这篇文章主要介绍学习笔记——react公共组件与组件跳转，现在分享给大家，希望可以做个参考。

在react中，除了页面级组件以外，我们有时还需要一些公共的组件，这些组件会被一个或多个页面级组件使用。例如导航组件和控制数量加减的组件。

1.组件定义：

已知，定义组件有两种方法：一种是类组件，我在学习笔记——react的基础功能中写过。另一中是函数组件。

无状态组件：在组件中没有constructor中的this.state的组件，用来呈现数据，没有复杂的业务逻辑和数据获取。无状态组件最好写成函数组件。

任何函数，只要这个函数显示的return一个jsx对象，则它就是一个组件，函数组件中，不存在this关键字和生命周期的钩子函数。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react';
import style from './index.module.scss';
import { NavLink } from 'react-router-dom';
const MiNav = () => (
<ul className={style["nav"]}>
<li>
<NavLink to="/home" activeClassName={style["active"]}>
<i></i>
<span>首页</span>
</NavLink>
</li>
<li>
<NavLink to="/category" activeClassName={style["active"]}>
<i></i>
<span>分类</span>
</NavLink>
</li>
<li>
<NavLink to="/taste" activeClassName={style["active"]}>
<i></i>
<span>品味</span>
</NavLink>
</li>
<li>
<NavLink to="/cart" activeClassName={style["active"]}>
<i></i>
<span>购物车</span>
</NavLink>
</li>
<li>
<NavLink to="/profile" activeClassName={style["active"]}>
<i></i>
<span>个人</span>
</NavLink>
</li>
</ul>
);
export default MiNav;

就如以上代码，我们可以通过将一个函数赋值给一个变量，并将变量导出来实现组件的定义。等号后面的函数写成了箭头函数，省略了return。

2.组件的跳转：

我们通过react-router-dom包中的NavLink组件实现路由的跳转。NavLink组件主要实现导航组件的跳转，需要to属性表示要去的路由。

而Link组件则表示简单的跳转。Link和NavLink组件都会转化成a标签。

3.组件的样式：

我们导入了index.module.scss的样式，module表示混淆了class值，使用时要加额外的操作。而scss是一种css的高级写法。需要安装node-sass才可以编译。

使用时在项目文件夹命令窗口写如下指令：

复制代码

1
yarn add node-sass@4.14.1

在组件样式中，导入其他的样式，需要用@import。

复制代码

1
@import '../../assets/_func.scss';

4.组件的使用：

在需要使用该组件的页面级组件引入即可使用。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
import
React, { Component } from 'react';
import { MiNav } from '../../components';
class Home extends Component {
render() {
return (
<div>这是主页
<MiNav />
</div>
);
}
}
export default Home;