标签:map const 渲染 AntdUi 05 community React 房屋 house
展示房屋详情
在找房页面中,给每一个房源列表添加点击事件,在点击时跳转到房屋详情页面
在单击事件中,获取到当前房屋id
根据房屋详情的路由地址,调用history.push() 实现路由跳转
<HouseItem key={key} onClick={() => this.props.history.push(`/detail/${house.houseCode}`)} // 注意:该组件中应该接收 style,然后给组件元素设置样式!!! style={style} src={BASE_URL + house.houseImg} title={house.title} desc={house.desc} tags={house.tags} price={house.price} />
封装getHouseDetail方法,在componentDidMount中调用该方法
componentDidMount() {
// 获取房屋数据
this.getHouseDetail()
}
在方法中,通过路由参数获取到当前房屋id
使用API发送请求,获取房屋数据,保存到state中
async getHouseDetail() { const { id } = this.props.match.params // 开启loading this.setState({ isLoading: true }) const res = await API.get(`/houses/${id}`) this.setState({ houseInfo: res.data.body, isLoading: false }) const { community, coord } = res.data.body // 渲染地图 this.renderMap(community, coord) }
使用房屋数据,渲染页面
解构出需要的数据
const { isLoading, houseInfo: { community, title, price, roomType, size, floor, oriented, supporting, description } } = this.state
渲染小区名称
{/* 导航栏 */} <NavHeader className={styles.navHeader} rightContent={[<i key="share" className="iconfont icon-share" />]} > {community} </NavHeader>
渲染轮播图
// 渲染轮播图结构 renderSwipers() { const { houseInfo: { houseImg } } = this.state return houseImg.map(item => ( <a key={item} href="http://itcast.cn"> <img src={BASE_URL + item} alt="" /> </a> ))
}
渲染标签
// 渲染标签 renderTags() { const { houseInfo: { tags } } = this.state return tags.map((item, index) => { // 如果标签数量超过3个,后面的标签就都展示位第三个标签的样式 let tagClass = '' if (index > 2) { tagClass = 'tag3' } else { tagClass = 'tag' + (index + 1) } return ( <span key={item} className={[styles.tag, styles[tagClass]].join(' ')}> {item} </span> ) }) }
渲染价格,房型,面积等
<Flex className={styles.infoPrice}> <Flex.Item className={styles.infoPriceItem}> <div> {price} <span className={styles.month}>/月</span> </div> <div>租金</div> </Flex.Item> <Flex.Item className={styles.infoPriceItem}> <div>{roomType}</div> <div>房型</div> </Flex.Item> <Flex.Item className={styles.infoPriceItem}> <div>{size}平米</div> <div>面积</div> </Flex.Item> </Flex>
渲染装修,楼层,朝向等
<Flex className={styles.infoBasic} align="start"> <Flex.Item> <div> <span className={styles.title}>装修:</span> 精装 </div> <div> <span className={styles.title}>楼层:</span> {floor} </div> </Flex.Item> <Flex.Item> <div> <span className={styles.title}>朝向:</span> {oriented.join('、')} </div> <div> <span className={styles.title}>类型:</span>普通住宅 </div> </Flex.Item> </Flex>
渲染地图
// 渲染地图 renderMap(community, coord) { const { latitude, longitude } = coord const map = new BMap.Map('map') const point = new BMap.Point(longitude, latitude) map.centerAndZoom(point, 17) const label = new BMap.Label('', { position: point, offset: new BMap.Size(0, -36) }) label.setStyle(labelStyle) label.setContent(` <span>${community}</span> <div class="${styles.mapArrow}"></div> `) map.addOverlay(label) }
渲染房屋配套
{/* 房屋配套 */} <div className={styles.about}> <div className={styles.houseTitle}>房屋配套</div> {/* 判断是否有数据 */} {supporting.length === 0 ? ( <div className={styles.titleEmpty}>暂无数据</div> ) : ( <HousePackage list={supporting} /> )} </div>
渲染房屋概况
<div className={styles.set}> <div className={styles.houseTitle}>房源概况</div> <div> <div className={styles.contact}> <div className={styles.user}> <img src={BASE_URL + '/img/avatar.png'} alt="头像" /> <div className={styles.useInfo}> <div>王女士</div> <div className={styles.userAuth}> <i className="iconfont icon-auth" /> 已认证房主 </div> </div> </div> <span className={styles.userMsg}>发消息</span> </div> <div className={styles.descText}> {description || '暂无房屋描述'} </div> </div> </div>
渲染推荐,可以复用 HouseItem组件
<div className={styles.recommend}> <div className={styles.houseTitle}>猜你喜欢</div> <div className={styles.items}> {recommendHouses.map(item => ( <HouseItem {...item} key={item.id} /> ))} </div> </div>
本文参考博客react好租客项目Day09-房屋详情&路由配置&登录功能&formik表单校验_码化疼-CSDN博客
标签:map,const,渲染,AntdUi,05,community,React,房屋,house 来源: https://www.cnblogs.com/wmlcn/p/15083080.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。