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

ゝ一纸荒年。 2022-11-22 05:30 246阅读 0赞

--------------------

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

### 1.组件定义：  ###

> 已知，定义组件有两种方法：一种是类组件，我在学习笔记——react的基础功能中写过。另一中是函数组件。
> 
> 无状态组件：在组件中没有constructor中的this.state的组件，用来呈现数据，没有复杂的业务逻辑和数据获取。无状态组件最好写成函数组件。
> 
> 任何函数，只要这个函数显示的return一个jsx对象，则它就是一个组件，函数组件中，不存在this关键字和生命周期的钩子函数。

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"]}>
 
 首页
 </NavLink>
 </li>
 <li>
 <NavLink to="/category" activeClassName={style["active"]}>
 
 分类
 </NavLink>
 </li>
 <li>
 <NavLink to="/taste" activeClassName={style["active"]}>
 
 品味
 </NavLink>
 </li>
 <li>
 <NavLink to="/cart" activeClassName={style["active"]}>
 
 购物车
 </NavLink>
 </li>
 <li>
 <NavLink to="/profile" activeClassName={style["active"]}>
 
 个人
 </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才可以编译。
> 
> 使用时在项目文件夹命令窗口写如下指令：

yarn add node-sass@4.14.1

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

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

### 4.组件的使用： ###

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

import React, { Component } from 'react';
 import { MiNav } from '../../components';
 
 class Home extends Component {
 render() {
 return (
 <div>这是主页
 <MiNav />
 </div>
 
 );
 }
 }
 
 export default Home;

> 以上就是定义公共组件，及公共组件的简单使用。