这篇文章将为大家详细讲解有关react如何封装自定义组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
文章背景：
在实际项目中，为了避免写重复代码，同时为了方便后期的维护，我们可以通过将相同样式的代码自定义封装成组件，然后只需要在页面调用自定义组件即可。
下面我们来看看具体的步骤：
1、先封装自定义组件
1）、新建CardList文件夹
2）、在CardList文件夹里新建index.js文件，并在index.js文件里书写如下代码：
计算
安全
数据库
网络和加速
企业服务
//index.js暴露组件CardList
import Card from './card';
import CardList from './cardList';
CardList.Card = Card;
export default CardList;3）、在CardList文件夹里新建cardList.js文件，并在该文件下书写如下代码：
import { Component } from 'react';
import withRouter from 'umi/withRouter';
import style from './index.css';
/**
* CardList组件内容
* @param title 组件标题
* @param extra 描述
* @param children 内容
* @param restProps 传入的自定义属性
* @returns {*}
* @constructor
*/
const CardList = ({title, extra, children, ...restProps})=>{
return(
<div>
<div className={style.card2} {...restProps}>
<nav>{title} <span className={style.details}>{extra}</span></nav>
{React.Children.map(
children,
child => (child ? React.cloneElement(child, { }) : child)
)}
</div>
</div>
)
}
export default CardList;4）、在CardList文件夹里新建index.css文件,并在该文件里书写样式
.card2{
height: auto;
background-color: white;
padding: 16px;
border-bottom: 1px solid #ddd;
}
.card2 nav{
color: red;
text-align: left;
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #333333;
margin-bottom: 0.2rem;
}
.card2 div{
color: #999999;
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.list1{
text-align: left;
display: flex;
}
.list1>span{
/*width: 50%;*/
display: inline-block;
vertical-align: top;
/*white-space:nowrap;*/
/*overflow:hidden;*/
/*text-overflow : ellipsis;*/
flex: 1;
}
.details{
float: right;
color:#2DA9FA;
}5）、在CardList文件夹里新建card.js文件，并在该文件下书写如下代码：
import { Component } from 'react';
import withRouter from 'umi/withRouter';
import style from './index.css';
/**
* 子组件内容
* @param title 标题
* @param children 内容
* @param restProps 传入的自定义属性
* @returns {*}
* @constructor
*/
const Card = ({title,children,...restProps})=>{
return(
<div>
<div className={style.list1} {...restProps}>
<span>{title} {children}</span>
</div>
</div>
)
}
export default Card;6）、用法如下：
import { Component } from 'react';
import withRouter from 'umi/withRouter';
import router from 'umi/router';
import CardList from './CardList/index';
const {Card} = CardList;
class Index extends Component{
state ={
loading:false,
totalList:[{"trainCount":2360,"stationName":"北京"},{"trainCount":152,"stationName":"北京东"},{"trainCount":4248,"stationName":"北京南"},{"trainCount":3336,"stationName":"北京西"},{"trainCount":56,"stationName":"通州"}],
}
render() {
let info = <div>
{
this.state.totalList.map((obj,index)=>{
return <CardList title={`${obj.stationName}站`} extra={<span onClick={()=>{this.jump({obj})}}>查看当天数据</span>} key={index}>
<Card title="当天进站列车：">{obj.trainCount||0} 车次</Card>
</CardList>
})
}
</div>
return (
<div>
{info}
</div>
)
}
}
export default withRouter(Index);7）、效果如下：
关于“react如何封装自定义组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
