最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】ReactJS中把tab中的内容提取成单独的page页面

ReactJS crifan 1996浏览 0评论

折腾:

【已解决】ReactJS中如何实现在底部的tab选项卡且支持图标

后,接着就是去:

把tab中的内容,抽离,提起,到单独的page页面中。

另外,通过:

React-WeUI Doc

-》

type也可以为:navbar或tabbar

而无意间发现还有个:

TabBody

和:

TabBodyItem

感觉像是:

tab中的主题内容,应该使用TabBody一样

如果是,则后续提取单独页面时,考虑试试TabBody

但是结果发现:

虽然可以把显示的内容,提取出来单独放到页面里

但是,此处

<Tab
type=”tabbar”
defaultIndex={this.state.curTabIdx}
onChange={this.onTabChange}
>

内部的

TabBarItem里面,必须有内容

否则就无法显示

导致一个问题:

我无法通过router去决定中间的主体内容显示什么

即:

import React, { Component } from ‘react’;
import { ROUTE_PREFIX, EMPTY_USER_INFO } from ‘common/define’;
import {
  Route,
  Switch,
  withRouter,
  Redirect } from ‘react-router-dom’;
import AppGlobal from ‘common/app-global’;
import {
  Tab,
  TabBarItem,
  Article,
} from ‘react-weui’;
//import styles
import ‘weui’;
import ‘react-weui/build/packages/react-weui.css’;
import {
  PageHeader,
} from ‘react-bootstrap’;
import ‘./index.less’;
import IconHome from ‘assets/img/icon_nav_button.png’;
import IconFunction from ‘assets/img/icon_nav_msg.png’;
import IconGraph from ‘assets/img/icon_nav_article.png’;
import IconMy from ‘assets/img/icon_nav_cell.png’;
// import Tabbar from ‘components/tabbar’;
import Home from ‘pages/home/home’;
import Function from ‘pages/function/function’;
import Graph from ‘pages/graph/graph’;
import My from ‘pages/my/my’;
export default class Index extends Component {
  state = {
    // curUserInfo : EMPTY_USER_INFO
    curTabIdx: 0,    
  };
  constructor(props) {
    super(props);
    console.log(`Index constructor`);
    console.log(this.props);
    this.onTabChange = this.onTabChange.bind(this);
  }
  onTabChange(newTabIdx){
    console.log(‘onTabChange: newTabIdx=’, newTabIdx);
    if (newTabIdx === this.state.curTabIdx) {
      console.log(‘click current tab: not change’);      
    } else {
      console.log(‘this.props.history=’, this.props.history);
      if (this.props.history) {
        let tabUrl = null;
        switch(newTabIdx){
          case 0:
            tabUrl = ROUTE_PREFIX.HOME;
            break;
          case 1:
            tabUrl = ROUTE_PREFIX.FUNCTION;
            break;
          case 2:
            tabUrl = ROUTE_PREFIX.GRAPH;
            break;
          case 3:
            tabUrl = ROUTE_PREFIX.MY;
            break;
        }
        if (tabUrl) {
          console.log(`jump to path: ${tabUrl}`);
          this.props.history.push(tabUrl);  
        }
      }
    }
  }
  render() {
    // console.log(`Index render: this.state.curUserInfo.isLogin=${this.state.curUserInfo.isLogin}`);
    console.log(‘Index render: curUserInfo=’, AppGlobal.curUserInfo);
    return (
      AppGlobal.curUserInfo.isLogin
      ?
      (
        <div className=”tab_container”>
          <Switch>
            <Route exact  path={ROUTE_PREFIX.HOME}      component={Home} />
            <Route exact  path={ROUTE_PREFIX.FUNCTION}  component={Function} />
            <Route exact  path={ROUTE_PREFIX.GRAPH}     component={Graph} />
            <Route exact  path={ROUTE_PREFIX.MY}        component={My} />
          </Switch>
          {/* <Tabbar data={AppGlobal.tabbar} onChange={this.onTabChange}/> */}
          <Tab
            type=”tabbar”
            defaultIndex={this.state.curTabIdx}
            onChange={this.onTabChange}
          >
            <TabBarItem icon={<img src={IconHome}/>} label=”首页”>
              {/* <Home /> */}
            </TabBarItem>
            <TabBarItem icon={<img src={IconFunction}/>} label=”功能”>
              {/* <Function /> */}
            </TabBarItem>
            <TabBarItem icon={<img src={IconGraph}/>} label=”图表”>
              {/* <Graph /> */}
            </TabBarItem>
            <TabBarItem icon={<img src={IconMy}/>} label=”我的”>
              {/* <My /> */}
            </TabBarItem>
          </Tab>
        </div>
      )
      :
      <Redirect to={
        {
          pathname: ROUTE_PREFIX.LOGIN
        }
      }/>
    );
  }
}
withRouter(Index);

中的:

this.props.history.push(tabUrl);

无效:

现在要想办法把

tab只是用来显示,然后页面的跳转和当前tab中的内容显示分离开。

https://weui.github.io/react-weui/docs/#/react-weui/docs/page/1/articles/63

只能在TabBarItem中,加上各自的页面的内容。

后来看到了:

https://weui.github.io/react-weui/docs/#/react-weui/docs/page/1/articles/65

貌似本身的示例代码中,就是分开的:

后来也看到了完整的示例代码:

react-weui/example/pages/tab at master · weui/react-weui

-》

点击tab自动显示内容的:

https://github.com/weui/react-weui/blob/master/example/pages/tab/tabbar_auto.js

单独分开的:

https://github.com/weui/react-weui/blob/master/example/pages/tab/tabbar.js

抽空再去试试

转载请注明:在路上 » 【未解决】ReactJS中把tab中的内容提取成单独的page页面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.169 seconds, using 22.17MB memory