React 組件封裝之 Card

• 一、Card 卡片
• 二、使用案例
• 三、API 使用指南
• 四、源代碼

一、Card 卡片

組件說明：
使列表成為卡片形式的布局。

效果展示：

二、使用案例

import {Card} from 'share'; import React from 'react'; export default class Example extends React.Component {constructor(props) {super(props);this.state = {dataList:[{productImgs:"",desc:"這是一段描述",createTime:"2019-9-29",productPrice:200}]}}render(){const {dataList} = this.props;return <div className="cm-plr-018">{dataList.length>0?dataList.map((item,index)=>{var productImgs = item.productImgs && item.productImgs.split(",");var desc = item.productDesc && item.productDesc.slice(0,28);return(<Card key={index}><div className="cm-flex cm-jc-sb cm-ai-c cm-plr-009 cm-ptb-018"><div className="cm-flex cm-ai-c"><img src={productImgs[0]} alt="" className="cm-img-14"/><div className="cm-ml-018 cm-flex-1"><div className="cm-c-333 cm-fs-026">{desc}</div><div className="cm-c-main cm-fs-030 cm-mt-018">￥{item.productPrice}</div><div className="cm-c-999 cm-pt-018 cm-fs-022">{getTimeFormat(item.createTime)}</div></div></div></div> </Card>)}): }</div>} }

三、API 使用指南

屬性說明類型默認(rèn)值

onClick	點擊卡片的回調(diào)	Function	無

四、源代碼

index.js

import React from 'react'; import {defaultProps} from './defaultProps'; import './index.css'; export default class Card extends React.Component {static defaultProps = defaultProps;render(){let {onClick,prefixCls} = this.props;return(<div className={prefixCls} onClick={()=>onClick?onClick():""}>{this.props.children}</div>)} }

index.less

@import '../default'; @prefixCls: s-card;/* 默認(rèn)搜索bar */ .@{prefixCls}{//display: flex;margin: (@size-10)-2 0;padding:(@size-10)/(@size-10);box-shadow: 2px 2px 2px 2px #eee;background: #fff;border-radius: 1px; }

defaultProps.js

export const defaultProps = {prefixCls: 's-card', };

總結(jié)

以上是生活随笔為你收集整理的React 组件封装之 Card 卡片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。