react component slot
Way of writing:
<Table>内容</Table>
//react插槽在自定义组件的内容位置。This is done using slots:
封装简单组件：在内容区域使用插槽
<Tab num={11} content="待收费数据（条）">
<i className="iconfont iconfont-xingqudingxiang"></i>
</Tab>Use of slots:
插槽内容默认在props属性上。属性为children
Specifically, the slots are divided into multiple
<Tab num={11} content="待收费数据（条）">
{
{
default: <i className="iconfont iconfont-xingqudingxiang"></i>,
left: <button>左</button>,
right: <button>右</button>,
}}
</Tab>
//转为数据对下个格式
let { num, content, children } = props;
console.log(children);
return (
<>
<div>
<div>{children.default}</div>
<div>
<div>{num}</div>
<div>{content}</div>
</div>
<div>
<div>左：{children.left}</div>
<div>右：{children.right}</div>
</div>
</div>
</>
);Actual combat: Modal box in the project
dialog.jsx
import { useEffect, useState } from "react";
import "../assets/css/dialog.css";
export default (props) => {
let { children, hidden,onUpdate } = props;
let [show, setShow] = useState(hidden);
//监听hidden
useEffect(() => {
setShow(hidden);
}, [hidden]);
let confirm = () => {
setShow(false);
onUpdate();
};
let cancel = () => {
setShow(false);
onUpdate();
};
//hidden控制模态框显示隐藏
if (show) {
return (
<>
<div className="dialog">
<div className="dialog-center">
{/* 标题 */}
<p>{children}</p>
<div>内容</div>
<div>
<button onClick={confirm}>确定</button>
<button onClick={cancel}>取消</button>
</div>
</div>
</div>
</>
);
} else return null;
};Button authentication
Use HOC to do it.
What are HOCs?
Higher-order components (HOC) are an advanced technique in React for reusing component logic. HOC itself is not part of the React API, it is a design pattern based on the composition characteristics of React.
effect:
Business logic used to reuse components.
vue mixin
react HOC
做公用逻辑复用
User data rendering with action button rendering:
analyze:
Use HOC to complete button authentication.
How to write Hoc:
高阶组件是参数为组件，返回值为新组件的函数。
function buttonHoc(wrapComponent){
return class组件
}
function buttonHoc(wrapComponent){
return ()=>{
return <></>
}
}Create button HOC advanced
//HOC 按钮鉴权高阶
//WrapComponent 被包裹组件
export default (WrapComponent) => {
//返回全新函数组件
return () => {
return (
<>
<div>HOC组件</div>
</>
);
};
};Higher-order components are used by ordinary components
//引入HOC高阶
import ButtonHOC from "./ButtonHoc";
let Button = (props) => {
let { label } = props;
return (
<>
<button>{label}</button>
</>
);
};
//使用高阶组件
export default ButtonHOC(Button);
The component mounts the high-order component to run (there is no unwrapped component in the high-order component, so only HOC is seen)
Output wrapped components in HOC components
//HOC 按钮鉴权高阶
//WrapComponent 被包裹组件 高阶组件形参首字母大写
export default (WrapComponent) => {
//返回全新函数组件
return () => {
return (
<>
<WrapComponent />
</>
);
};
};
以上效果不正常，按钮组件props没有值。
因为HOC高阶组件没有向下传递propsPass props down in the HOC component.
//HOC 按钮鉴权高阶
//WrapComponent 被包裹组件 高阶组件形参首字母大写
export default (WrapComponent) => {
//返回全新函数组件
return (props) => {
console.log(props);
return (
<>
{/* ...是扩展props自定义组件属性传值 延申 */}
<WrapComponent {...props} />
</>
);
};
};
button permissions
当前用户登录，开发服务器会返回当前用户的权限。
//HOC 按钮鉴权高阶
//HOC 按钮鉴权高阶
import { useState } from "react";
//WrapComponent 被包裹组件 高阶组件形参首字母大写
export default (WrapComponent) => {
//返回全新函数组件
return (props) => {
//获取当前权限
let { premission } = props;
//模拟用户的权限数据
//"admin:user:delete" "admin:user:update" "*:*:*"
let [prem, setPrem] = useState(["*:*:*"]);
//如果是全部权限 直接渲染
let Index = null;
if (prem[0] == "*:*:*") Index = 0;
else Index = prem.indexOf(premission);
return (
<>
{/* ...是扩展props自定义组件属性传值 延申 */}
{Index != -1 ? <WrapComponent {...props} /> : null}
</>
);
};
};How react uses routing
1.react-router
1.react-router-dom 操作浏览器端路由
2.react-router-native 操作nativeLearn react-router-dom routing
Document address:
https://reactrouter.com/en/v6.3.0/api
//英文文档Install react-router-dom
cnpm i --save-dev react-router-dom
"react-router-dom": "^6.9.0",You need to know that built-in components are mainly used in react-router-dom to configure routing
<BrowserRouter></BrowserRouter> history路由
<HashRouter></HashRouter> hash路由# <BrowserRouter>
{/* The rest of your app goes here */}
//中间位置补路由配置
</BrowserRouter>,Start configuring your routing structure with built-in components
Use the built-in components Routes and Route components
Routes 为路由的配置区域 相当于路由的出口
Route 是详细路由配置 <BrowserRouter>
{/* 路由配置 */}
<Route></Route>
</BrowserRouter>
//以上这种写法报错
Adjusted code structure
<BrowserRouter>
{/* 路由配置 */}
<Routes>
<Route></Route>
</Routes>
</BrowserRouter>Start configuring routing
<Route path="/admin" element={}></Route>
path 路由路径
element 路由的组件First-level routing after configuration
<BrowserRouter>
{/* 路由配置 */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</BrowserRouter>
//上下一样
<BrowserRouter>
{/* 路由配置 */}
<Routes>
<Route path="/" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</BrowserRouter>If there is no/route in the first-level route configuration, route redirection is required
使用内置组件Navigate重定向
用法：
<Navigate to="/admin" />
to重定向路由的路径
replace 是否替换当前路由路径 replace={true}
<Navigate to="/admin" replace={true} />Routing configuration non-routing path into 404 components
//引入路由模块
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
//引入路由组件
import Admin from "./views/Admin";
import Login from "./views/Login";
import NotFound from "./views/not-found";
export default () => {
return (
<>
<BrowserRouter>
{/* 路由配置 */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route
path="/"
element={<Navigate to="/admin" replace={true} />}
></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
</BrowserRouter>
</>
);
};
//或者添加404路由
<BrowserRouter>
{/* 路由配置 */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route
path="/"
element={<Navigate to="/admin" replace={true} />}
></Route>
<Route path="/not-found" element={<NotFound />}></Route>
<Route
path="*"
element={<Navigate to="/not-found" replace={true} />}
></Route>
</Routes>
</BrowserRouter>