好客租房112-tab.item页面重构

tabBar.item

import React from 'react'
import { TabBar } from 'antd-mobile'
import {BrowserRouter as Router,Route, Link} from "react-router-dom"
import News from "../News/index.js"
import Index from "../Index/index.js"
import HouseList from "../HouseList/index.js"
import Profile from "../Profile/index.js"
//导入组件自己的样式文件
import "./index.css"
export default class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      //	重定向
        selectedTab:this.props.location.pathname,
      };
    }
 
    renderTabBarItem(){
        const tabItems=[{
            title:"首页",
            icon:'icon-ind',
            path:"/home/index"
        },
        {
            title:"搜索",
            icon:'icon-findHouse',
            path:"/home/list"
        },
        {
            title:"资讯",
            icon:'icon-infom',
            path:"/home/news"
        },
        {
            title:"我的",
            icon:'icon-my',
            path:"/home/profile"
        }
    ]
        return tabItems.map(item=> (
            <TabBar.Item
            title={item.title}
            key={item.title}
            icon={
              <i className={`iconfont ${item.icon}`}></i>
            }
            // 选中后的展示图片
            selectedIcon={
              <i className={`iconfont ${item.icon}`}></i>
            }

            
            // 是否选中
            selected={this.state.selectedTab === item.path}
            // bar 点击触发，需要自己改变组件 state & selecte={true}
            onPress={() => {
              this.setState({
                selectedTab: item.path,
              });
              //路由切换
              this.props.history.push(item.path)
            }}
          >
              {/* // 将 home 组件作为实参传递
            {this.renderContent(<Home />)} */}

          </TabBar.Item>
        ) 
        )
    }
   
    render() {
     
      return (
        <div className='home'>
             <Route path="/home/profile" component={Profile}></Route>
            <Route path="/home/list" component={HouseList}></Route>
             <Route path="/home/index" component={Index}></Route>
            <Route path="/home/news" component={News}></Route>
          <TabBar
            unselectedTintColor="#21b97a"
            tintColor="#33A3F4"
            barTintColor="white"
            noRenderContent={true}
          >
              {this.renderTabBarItem()}
          </TabBar>
        </div>
      );
    }
  }

运行结果