Home  >  Article  >  Web Front-end  >  The correct steps to encapsulate custom components in react

The correct steps to encapsulate custom components in react

王林
王林forward
2020-12-30 09:12:362933browse

The correct steps to encapsulate custom components in react

Background of the article:

In actual projects, in order to avoid writing duplicate code and to facilitate later maintenance, we can customize the encapsulation of the same style of code into a component, and then just call the custom component on the page.

(Learning video sharing: javascript video tutorial)

Let’s take a look at the specific steps:

1. First encapsulate the custom component

1), create a new CardList folder

2), create a new index.js file in the CardList folder, and write the following code in the index.js file:

//index.js暴露组件CardList
import Card from './card';
import CardList from './cardList';
 
CardList.Card = Card;
export default CardList;

3). Create a new cardList.js file in the CardList folder, and write the following code under the file:

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). Create a new index.css file in the CardList folder, and write in the file Style

.card2{
  height: auto;
  background-color: white;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.card2 nav{
  color: red;
  text-align: left;
  font-family: &#39;Arial Normal&#39;, &#39;Arial&#39;;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  margin-bottom: 0.2rem;
}
.card2 div{
  color: #999999;
  font-family: &#39;Arial Normal&#39;, &#39;Arial&#39;;
  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), create a new card.js file in the CardList folder, and write the following code under the file:

import { Component } from &#39;react&#39;;
import withRouter from &#39;umi/withRouter&#39;;
import style from &#39;./index.css&#39;;
 
/**
 * 子组件内容
 * @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), the usage is as follows:

import { Component } from &#39;react&#39;;
import withRouter from &#39;umi/withRouter&#39;;
import router from &#39;umi/router&#39;;
import CardList from &#39;./CardList/index&#39;;
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), the effect is as follows:

The correct steps to encapsulate custom components in react

Related recommendations: js tutorial

The above is the detailed content of The correct steps to encapsulate custom components in react. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete