Ken428965 2022-09-01 18:26 采纳率: 53.6%
浏览 211
已结题

react使用react-router v6.3.0如何正确使用ant design mobile v5.22.0的TabBar组件标签

react使用react-router v6.3.0,如何正确使用ant design mobile v5.22.0的TabBar组件标签,希望实现以下效果:

img

在电脑文件路径src\pages\Home里的index.js现时的代码如下:

import React from 'react'
import { Outlet } from 'react-router-dom'
export default class Home extends React.Component {
    render() {
        return (
          <div style={{ backgroundColor: 'skyblue', padding: 10 }}>
            首页
            <Outlet />
        
) } }

如果将ant desingn mobile官网 https://mobile.ant.design/zh/components/tab-bar 里的TabBar标签js代码复制到上面的index.js里,请问应该是全部复制还是部分复制?具体复制到index.js里的哪个位置?

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-09-02 11:30
    关注
    1. app.js 引入 home组件 其实 你直接 把home里的代码复制到 App.js 也行 。

    img

    import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
    import Home from "./pages/home.jsx";
    function App() {
      return (
        <div className="App">
          <Router>
            <Home />
          </Router>
    
    
        </div>
      );
    }
    
    export default App;
    
    

    2.Home组件

    img

    import React, { Component, useState } from 'react';
    import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from "react-router-dom";
    import { Badge, TabBar } from 'antd-mobile';
    import {
        AppOutline,
        MessageOutline,
        MessageFill,
        UnorderedListOutline,
        UserOutline,
    } from 'antd-mobile-icons'
    
    function Home() {
        const navigate = useNavigate();
        const tabChange = (key) => {
            navigate(`${key}`)
        }
        const tabs = [
            {
                key: 'home',
                title: '首页',
                icon: <AppOutline />,
                badge: Badge.dot,
            },
            {
                key: 'todo',
                title: '我的待办',
                icon: <UnorderedListOutline />,
                badge: '5',
            },
            {
                key: 'message',
                title: '我的消息',
                icon: (active) =>
                    active ? <MessageFill /> : <MessageOutline />,
                badge: '99+',
            },
            {
                key: 'personalCenter',
                title: '个人中心',
                icon: <UserOutline />,
            },
        ]
    
        return (
            <div>
                 {/* 这个也可以循环出来 */}
                <Routes>
                    <Route path='/' element={"首页"}></Route>
                    <Route path='/home' element={"首页"}></Route>
                    <Route path='/todo' element={"我的代办"}></Route>
                    <Route path='/message' element={"我的消息"}></Route>
                    <Route path='/personalCenter' element={"个人中心"}></Route>
                </Routes>
                <TabBar onChange={tabChange}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
    
            </div>
        );
    
    }
    
    export default Home;
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 9月10日
  • 已采纳回答 9月2日
  • 创建了问题 9月1日

悬赏问题

  • ¥15 powerbuilder出现这样的报错
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上