반응에서 사용자 정의 구성 요소를 캡슐화하는 올바른 단계

글 배경:

실제 프로젝트에서는 중복 코드 작성을 방지하고 향후 유지 관리를 용이하게 하기 위해 동일한 스타일의 코드를 구성 요소로 캡슐화하여 사용자 정의할 수 있으며 그런 다음 사용자 정의 구성 요소만 호출하면 됩니다. 페이지가 바로 그것입니다.

(동영상 공유 학습: 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(
    <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) , 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(
    <div>
      <div className={style.list1} {...restProps}>
        <span>{title} {children}</span>
      </div>
    </div>
  )
}
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 = <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), 효과는 다음과 같습니다:

관련 권장 사항: js tutorial

위 내용은 반응에서 사용자 정의 구성 요소를 캡슐화하는 올바른 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!