Ken428965 2022-08-30 23:29 采纳率: 53.4%
浏览 164
已结题

react使用ant design mobile v5.22.0的TabBar组件标签问题

react使用ant design mobile v5.22.0的TabBar组件标签,希望实现以下效果:

img


但在ant desingn mobile官网https://mobile.ant.design/zh/components/tab-bar将TabBar标签的代码复制到vscode后报错如下图:

img


chrom浏览器报错报错如下图:

img

img


请问是什么原因?请问解决办法是?

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-08-31 09:00
    关注
    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;
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥50 远程桌面打开Mastercam、没有许可证、物理机打开正常
  • ¥15 ubuntu安装gdal后java读取tif文件报错
  • ¥15 请问lammps怎么做两种金属连接的原子浓度分布图
  • ¥15 求jacquard数据集
  • ¥15 w10部分软件不能联网
  • ¥15 关于安装hbase的问题(操作系统-windows)
  • ¥15 novnc连接pve虚拟机报错安全协议不支持262
  • ¥15 设备精度0.03给多少公差能达到CPK1.33
  • ¥15 qt+ffmpeg报错non-existing PPS 0 referenced
  • ¥50 MacOS 使用虚拟机安装k8s