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

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 01: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月9日
  • 已采纳回答 9月2日
  • 创建了问题 8月30日

悬赏问题

  • ¥30 silcavo仿真,30分钟,只需要代码
  • ¥15 FastReport 怎么实现打印后马上关闭打印预览窗口
  • ¥15 利用3支股票数据估计其均值和方差的95%置信区间。
  • ¥15 微信小程序运行一项功能时,弹出未知错误弹框,检查代码没有问题
  • ¥15 ATAC测序生成self-pseudo replicates之前是否要进行去线粒体reads
  • ¥15 python模糊字匹配函数问题
  • ¥20 谁刷目标页面的uv记录器上数据,数据只记录跳转的数值
  • ¥30 数据库软件的安装方法
  • ¥15 一道以太网数据传输题
  • ¥15 python 下载群辉文件