react如何封装自定义组件_程序开发

react如何封装自定义组件

创始人

2024-12-27 14:42:42

0次

文章背景：

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

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

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）、效果如下：

react如何封装自定义组件

上一篇：jquery中$("#")和$("#"+xx)有什么区别

下一篇：css body实现不出现滚动条的方法

react如何封装自定义组件

相关内容

热门资讯