react 组件封装原则_react封装自定义组件的正确步骤

文章背景：

在实际项目中，为了避免写重复代码，同时为了方便后期的维护，我们可以通过将相同样式的代码自定义封装成组件，然后只需要在页面调用自定义组件即可。

(学习视频分享：javascript视频教程)

下面我们来看看具体的步骤：

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(

{title} {extra}

{React.Children.map(

children,

child => (child ? React.cloneElement(child, { }) : child)

)}

)

}

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(

{title} {children}

)

}

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 =

{

this.state.totalList.map((obj,index)=>{

return {this.jump({obj})}}>查看当天数据} key={index}>

{obj.trainCount||0} 车次

})

}

return (

{info}

)

}

}

export default withRouter(Index);

7)、效果如下：

相关推荐：js教程