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

The correct steps to encapsulate custom components in react

王林
Release: 2020-12-30 09:12:36
forward
3020 people have browsed it

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;
Copy after login

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;
Copy after login

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;
}
Copy after login

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;
Copy after login

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);
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template