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

---

在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"]}>
                                <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才可以编译。

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

yarn add [email protected]

在组件样式中，导入其他的样式，需要用@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;

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