微语:代码适合中午敲,早晚出BUG
React使用Design的TabBar进行二级路由出口显示 React
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如何进行路由跳转 React
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');
React中input如何进行双向绑定 React
通过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;
React中如何进行父子组件传递参数 React
父传子:
父组件发送值:假设引入了组件名为 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>
);
}
React如何进行列表循环 React
使用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>
);
}
React设置style和class样式 React
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>
)
}
React创建响应式数据, 并修改 React
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>
)
}
创建一个 React 项目 React
1.全局安装脚手架
yarn global add create-react-app
2.使用脚手架搭建项目
create-react-app 项目名
3.启动项目
cd 项目名 //进入项目目录
yarn start //运行项目