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


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

  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;

你的项目框架主题用的是js，不是ts。而ant-design提供的这个demo用的是ts的写法，所以报错了。你可以尝试找js版本的

img

然后就会去到这里页面，复制右边的js代码去测试看看行不行

img