react如何封装自定义组件
这篇文章将为大家详细讲解有关react如何封装自定义组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联主营黄南州网站建设的网络公司,主营网站建设方案,app开发定制,黄南州h5微信小程序定制开发搭建,黄南州网站营销推广欢迎黄南州等地区企业咨询
文章背景:
在实际项目中,为了避免写重复代码,同时为了方便后期的维护,我们可以通过将相同样式的代码自定义封装成组件,然后只需要在页面调用自定义组件即可。
下面我们来看看具体的步骤:
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() } export default CardList;{React.Children.map( children, child => (child ? React.cloneElement(child, { }) : child) )}
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() } export default Card;{title} {children}
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 ={ this.state.totalList.map((obj,index)=>{ returnreturn ({this.jump({obj})}}>查看当天数据} key={index}> }) }{obj.trainCount||0} 车次 {info}) } } export default withRouter(Index);
7)、效果如下:
关于“react如何封装自定义组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
新闻标题:react如何封装自定义组件
地址分享:http://scyanting.com/article/gdedcj.html