在实际项目中，为了避免写重复代码，同时为了方便后期的维护，我们可以通过将相同样式的代码自定义封装成组件，然后只需要在页面调用自定义组件即可。
（学习视频分享：javascript视频教程）
下面我们来看看具体的步骤：
1、先封装自定义组件
1）、新建cardlist文件夹
2）、在cardlist文件夹里新建index.js文件，并在index.js文件里书写如下代码：
//index.js暴露组件cardlistimport 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）、效果如下：
相关推荐：js教程
以上就是react封装自定义组件的正确步骤的详细内容。