React使用AntDesignMobileUI组件在Layuot页面组件中如何中使用 TabBar标签栏进行二级路由显示

• 1.TabBar中的key改为你的路由地址，需要提前配置好，在app.js中
• 2.引入OutTabBalet ,作为出口显示
• 3.使用TabBa的onChange，配合useNavigate进行页面跳转。

import React, { useState, useEffect } from 'react';
import { TabBar } from 'antd-mobile';
import './layout.scss';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';

export default function Layout() {
    let [active, setActive] = useState('');
    let location = useLocation();
    let navigate = useNavigate();
    useEffect(() => {
        setActive(location.pathname);
    }, []);

    let tabs = [
        {
            key: '/Layout/Popular',
            title: '热映',
            icon: <AppOutline />,
        },
        {
            key: '/Layout/Cinema',
            title: '影院',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/Layout/My',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    let setRouteActive = (value) => {
        navigate(value);
        setActive(value);
        console.log(value);
    };

    return (
        <div className="layout-page">
            <div className="page">
                <Outlet />
            </div>
            <TabBar onChange={setRouteActive} activeKey={active}  >
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                    />
                ))}
            </TabBar>
        </div>
    );
}

React路由跳转

引入包

import { HashRouter, Route, Routes } from 'react-router-dom';

App.js中配置路由信息

import React from 'react'
import Login from './views/login/Login.jsx'
import Register from './views/register/Register.jsx'
import Layout from './views/layout/Layout'
import { HashRouter, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      {/* routes线路匹配容器，所有组件都要放置才这里 */}
      <Routes>
        <Route path='/' exact element={<Login />}></Route>
        {/* 登录 */}
        <Route path='/Login' element={<Login />}></Route>
        {/* 注册 */}
        <Route path='/Register' element={<Register />}></Route>
        <Route path='/Layout' element={<Layout />}></Route>
      </Routes>
    </HashRouter>
  );
}

export default App;

点击按钮跳转

//如有引入Link
import { Link} from 'react-router-dom';
<Link to="/Register">前往注册</Link>

函数中使用

在 React Router v6 中，useHistory 已被替换为 useNavigate

//引入包
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
//调用navigate 传入路由地址即可
navigate('/Layout');

通过onChange或者onInput事件触发useState中修改值的函数

import { useState } from 'react';
function App() {
  let [accValue, setAcc] = useState('')
  return (
    <div className="App">
      <input type="text" value={accValue} onChange={e => { setAcc(e.target.value) }} />
      <span>{accValue}</span>
    </div>
  );
}
export default App;

父传子：

父组件发送值：假设引入了组件名为 Hello，只需要在组织上挂上一个变量然后给里面写入值就可以。

 <Hello arr={[{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }]} />

子组件接收：在函数里面接受一个props，里面包含了夫组件传递过来的所有参数，只需要props.参数名就可以拿到参数例如：props.arr

export default function Hello(props) {
    return (
        <div>
            <ul>
                {
               props.arr.map((v, i) => <li key={i}><a href={v.url}>{v.title}</a></li>)
                }
            </ul>
        </div>
    );
}

子传父

在父组件定义一个函数，接受一个参数，然后挂到子组件上面， 在子组件中之只需要用porps接受这个函数，把参数丢进去就可以了。

父组件：

import Hello from './components/list/Hello.jsx'
function App() {
  let getinfo = (val) => {
    console.log(val);
  }
  return (
    <div className="App">
      <Hello fuc={getinfo}  />
    </div>
  );
}
export default App;

子组件：

import { useState } from 'react';
export default function Hello(props) {
    let [pwd] = useState(11111)
    let clicksend = () => {
        props.fuc(pwd)
    }
    return (
        <div>
            <button onClick={clicksend}>点我</button>
        </div>
    );
}

使用map方法，对每一条数据进行循环，循环的值会产生一个新的数组，React检测到数组里面有标签会自动展开，再给每一个循环的标签设置一个唯一KEY可以让提高性能让React最小密度更新。

import './Hello.css';
import { useState } from 'react';

export default function Hello() {
    let [arr, newarr] = useState([{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }])
    return (
        <div>
            <ul>
                {
                    arr.map((v, i) => <li className={i === 0 ? 'h1' : ''} key={i}><a  href={v.url}>{v.title}</a></li>)
                }

            </ul>
        </div>
    );
}

1.行类样式

export default function Hello() {
 return (
        <div>
            <p style={{ fontSize:'20px'}}>这是一段文本</p>
        </div>

    )

}

2.Class样式需要引入外部样式

import './Hello.css'
export default function Hello() {
 return (
        <div>
            <p className='fontSize'>这是一段文本</p>
        </div>

    )
}

1.通过useState进行创建响应式数据，引入useState，

import { useState } from "react"

2.创建好之后，会返回一个数组，下标0就是你的变量，下下标1就是改变内容的方法，改改变内容就需要调用下标1的方法，这里用结构的方式

let [name,setName]=useState('张三')

3.完整代码

import { useState } from "react"

export default function Hello (){
    let [name,setName]=useState('张三')
    let clickBtn=()=>{
        setName('李四')
    }
    return (
        <div>
            <h1>{name}</h1>
            <button onClick={()=>setName('李四')}>修改</button>
            {/* 或者 */}
            <button onClick={clickBtn}>修改</button>
        </div>
    )

}

1.全局安装脚手架

yarn global add create-react-app

2.使用脚手架搭建项目

create-react-app 项目名

3.启动项目

cd 项目名 //进入项目目录

yarn start //运行项目