글 배경:
실제 프로젝트에서는 중복 코드 작성을 방지하고 향후 유지 관리를 용이하게 하기 위해 동일한 스타일의 코드를 구성 요소로 캡슐화하여 사용자 정의할 수 있으며 그런 다음 사용자 정의 구성 요소만 호출하면 됩니다. 페이지가 바로 그것입니다.
(동영상 공유 학습: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!