本文摘自PHP中文网,作者V,侵删。
文章背景:
在实际项目中,为了避免写重复代码,同时为了方便后期的维护,我们可以通过将相同样式的代码自定义封装成组件,然后只需要在页面调用自定义组件即可。
(学习视频分享:javascript视频教程)
下面我们来看看具体的步骤:
1、先封装自定义组件
1)、新建CardList文件夹
2)、在CardList文件夹里新建index.js文件,并在index.js文件里书写如下代码:
1 2 3 4 5 6 | import Card from './card' ;
import CardList from './cardList' ;
CardList.Card = Card;
export default CardList;
|
3)、在CardList文件夹里新建cardList.js文件,并在该文件下书写如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import { Component } from 'react' ;
import withRouter from 'umi/withRouter' ;
import style from './index.css' ;
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文件,并在该文件里书写样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .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{
display: inline-block;
vertical-align: top;
flex: 1;
}
.details{
float: right;
color:#2DA9FA;
}
|
5)、在CardList文件夹里新建card.js文件,并在该文件下书写如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { Component } from 'react' ;
import withRouter from 'umi/withRouter' ;
import style from './index.css' ;
const Card = ({title,children,...restProps})=>{
return (
<div>
<div className={style.list1} {...restProps}>
<span>{title} {children}</span>
</div>
</div>
)
}
export default Card;
|
6)、用法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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)、效果如下:
阅读剩余部分
相关阅读 >>
uniapp和React的区别
一些关于React的常见面试题(分享)
安装React脚手架失败怎么办
浅谈React中获取数据的方法及其优缺点
React中ref怎么用
React fabric是什么
React初级基础面试题(分享)
React中ant design mobile是什么
React怎么mock数据
React需要node吗
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » react封装自定义组件的正确步骤