Ken428965 2022-08-30 23: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 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日

悬赏问题

  • ¥60 不懂得怎么运行下载来的代码
  • ¥15 CST导出3D模型图为什么和软件显示不一样?
  • ¥15 加热反应炉PLC控制系统设计(相关搜索:梯形图)
  • ¥15 python 用Dorc包报错,我的写法和网上教的是一样的但是它显示无效参数,是什么问题
  • ¥15 经过滑动平均后的一维信号还原用什么结构好呢?
  • ¥15 指定IP电脑的访问设置
  • ¥30 matlab ode45 未发现警告,但是运行出错
  • ¥15 为什么devc++编译项目会失败啊
  • ¥15 vscode platformio
  • ¥15 代写uni代码,app唤醒