在react中封装能够进行复用的组件,实现在多个页面都能够使用,减少了我们书写的代码量。
我举一个例子来进行说明
1.顶部导航栏在我们做项目时经常性遇到,将顶部的导航栏封装成一个能够复用的组件
2.我们使用的是antd-mobile组件库中的NavBar组件
下面我们来开始进行封装
import React from 'react'
导入高阶组件
import {withRouter} from 'react-router-dom'
import { NavBar } from 'antd-mobile';
import './index.scss'
添加prop-types进行检验
import propTypes from 'prop-types'
在我们调用组件的页面将修改的部分作为props的属性进行传递过来
在这里我们进行props的解构
function Bar ({children,history}){
return (
<NavBar
className="navBar"
mode="light"
icon={<i className="iconfont icon-back"/>}
onLeftClick={() => history.go(-1)}
>children</NavBar>
)
}
Bar.propTypes={
title:propTypes.string.isRequired
}
export default withRouter(Bar) 使用高阶组件withRputer可以将调用页面的this传递到当前页面进行使用