在react中封装能够复用的组件

在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传递到当前页面进行使用