Die richtigen Schritte zum Kapseln benutzerdefinierter Komponenten in React

Artikelhintergrund:

Um in tatsächlichen Projekten das Schreiben von doppeltem Code zu vermeiden und die spätere Wartung zu erleichtern, können wir denselben Codestil anpassen, indem wir ihn in Komponenten kapseln, und müssen dann nur die benutzerdefinierte Komponente aufrufen die Seite Das ist es.

(Lernvideo-Freigabe: Javascript-Video-Tutorial)

Werfen wir einen Blick auf die spezifischen Schritte:

1. Kapseln Sie zunächst die benutzerdefinierte Komponente

1) und erstellen Sie einen neuen CardList-Ordner

2). CardList-Datei Erstellen Sie eine neue Datei „index.js“ im Ordner und schreiben Sie den folgenden Code in die Datei „index.js“:

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

3). Erstellen Sie eine neue Datei „cardList.js“ im Ordner „CardList“ und schreiben Sie den folgenden Code darunter Datei:

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) , Erstellen Sie eine neue index.css-Datei im CardList-Ordner und schreiben Sie den Stil in die Datei

.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), Erstellen Sie eine neue card.js-Datei im CardList-Ordner und schreiben Sie den folgenden Code Unter der Datei:

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) ist die Verwendung wie folgt:

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), der Effekt ist wie folgt:

Verwandte Empfehlungen: js-Tutorial

Das obige ist der detaillierte Inhalt vonDie richtigen Schritte zum Kapseln benutzerdefinierter Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!