欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-26 11:12:44
...

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