在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 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;
以上就是定义公共组件,及公共组件的简单使用。