react好租客项目Day09-房屋详情&路由配置&登录功能&formik表单校验

房屋详情模块-准备工作

目标

• 看懂模板HouseDetail的结构
• 能够获取到数据，渲染到组件上
• 能够配置通用路由规则，并且获取路由参数

模板说明

• 创建房屋详情页面HouseDetail
• 修改NavHeader组件（添加了className和rightContent两个props）
• 创建了HousePackage组件（房屋配套）
• 这些模板已经提供好，可以直接来使用

// 添加 className 和 rightContent（导航栏右侧内容） 属性
function NavHeader({
  children,
  history,
  onLeftClick,
  className,
  rightContent
}) {
  // 默认点击行为
  const defaultHandler = () => history.go(-1)

  return (
    <NavBar
      className={[styles.navBar, className || ''].join(' ')}
      mode="light"
      icon={<i className="iconfont icon-back" />}
      onLeftClick={onLeftClick || defaultHandler}
      rightContent={rightContent}
    >
      {children}
    </NavBar>
  )
}

// 添加props校验
NavHeader.propTypes = {
  ...
  rightContent: PropTypes.array
}

// withRouter(NavHeader) 函数的返回值也是一个组件
export default withRouter(NavHeader)

路由参数（★★★）

• 房源有多个，那么URL路径也就有多个，那么需要多少个路由规则来匹配呢？一个还是多个？
• 使用 一个 路由规则匹配不同的URL路径，同时I获取到URL中不同的内容，利用路由参数来解决
• 让一个路由规则，同时匹配多个符合该规则的URL路径
• 语法：/detail/:id ，其中:id 就是路由参数

• 获取路由参数： props.match.params

展示房屋详情（★★★）

• 在找房页面中，给每一个房源列表添加点击事件，在点击时跳转到房屋详情页面
• 在单击事件中，获取到当前房屋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)