react component slot
Way of writing:
<Table>Content</Table> //The react slot is in the content position of the custom component.
This is done using slots:
Encapsulating Simple Components: Using Slots in the Content Area
<Tab num={11} content="Data to be charged (pieces)">
<i className="iconfont iconfont-xingqudingxiang"></i>
</Tab>
Use of slots:
Slot content defaults to the props attribute. The attribute is children
Specifically, the slots are divided into multiple
<Tab num={11} content="Data to be charged (pieces)">
{<!-- -->{
default: <i className="iconfont iconfont-xingqudingxiang"></i>,
left: <button>Left</button>,
right: <button>right</button>,
}}
</Tab>
//Convert to the next format of the data pair
let { num, content, children } = props;
console. log(children);
return (
<>
<div>
<div>{children.default}</div>
<div>
<div>{num}</div>
<div>{content}</div>
</div>
<div>
<div>Left: {children.left}</div>
<div>Right: {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);
//monitor hidden
useEffect(() => {
setShow(hidden);
}, [hidden]);
let confirm = () => {
setShow(false);
onUpdate();
};
let cancel = () => {
setShow(false);
onUpdate();
};
//hidden controls the display and hiding of the modal box
if (show) {
return (
<>
<div className="dialog">
<div className="dialog-center">
{/* title */}
<p>{children}</p>
<div>content</div>
<div>
<button onClick={confirm}>OK</button>
<button onClick={cancel}>Cancel</button>
</div>
</div>
</div>
</>
);
} else return null;
};
Button authentication
Use HOC to do it.
What are HOCs?
Higher-order components (HOCs) 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 mixins react HOC Do common logic reuse
User data rendering with action button rendering:
analyze:
Use HOC to complete button authentication.
How to write Hoc:
A higher-order component is a function whose parameter is a component and returns a new component.
function buttonHoc(wrapComponent){
return class component
}
function buttonHoc(wrapComponent){
return ()=>{
return <></>
}
}
Create button HOC advanced
//HOC button authentication high-level
//WrapComponent is wrapped component
export default (WrapComponent) => {
// return a new function component
return () => {
return (
<>
<div>HOC component</div>
</>
);
};
};
Higher-order components are used by ordinary components
//Introduce HOC high-level
import ButtonHOC from "./ButtonHoc";
let Button = (props) => {
let { label } = props;
return (
<>
<button>{label}</button>
</>
);
};
// use higher order components
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 button authentication high-level
//WrapComponent is the wrapped component, the first letter of the formal parameter of the high-order component is capitalized
export default (WrapComponent) => {
// return a new function component
return () => {
return (
<>
<WrapComponent />
</>
);
};
};
The above effect is not normal, the button component props has no value. Because HOC high-level components do not pass props down
Pass props down in the HOC component.
//HOC button authentication high-level
//WrapComponent is the wrapped component, the first letter of the formal parameter of the high-order component is capitalized
export default (WrapComponent) => {
// return a new function component
return (props) => {
console. log(props);
return (
<>
{/* ... is the extended props custom component attribute value extension */}
<WrapComponent {...props} />
</>
);
};
};
button permissions
The current user logs in, and the development server will return the permissions of the current user.
//HOC button authentication high-level
//HOC button authentication high-level
import { useState } from "react";
//WrapComponent is the wrapped component, the first letter of the formal parameter of the high-order component is capitalized
export default (WrapComponent) => {
// return a new function component
return (props) => {
// Get the current permission
let { premission } = props;
//Simulate the user's permission data
//"admin:user:delete" "admin:user:update" "*:*:*"
let [prem, setPrem] = useState(["*:*:*"]);
//If it is full permission, render directly
let Index = null;
if (prem[0] == "*:*:*") Index = 0;
else Index = prem. indexOf(premission);
return (
<>
{/* ... is the extended props custom component attribute value extension */}
{Index != -1 ? <WrapComponent {...props} /> : null}
</>
);
};
};
How react uses routing
1. react-router 1. react-router-dom operates browser-side routing 2. react-router-native operation native
Learn react-router-dom routing
Document address:
https://reactrouter.com/en/v6.3.0/api //English document
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 routing <HashRouter></HashRouter> hash routing#
<BrowserRouter>
{/* The rest of your app goes here */}
//Additional routing configuration in the middle position
</BrowserRouter>,
Start configuring your routing structure with built-in components
Use the built-in components Routes and Route components
Routes is the configuration area of the route, which is equivalent to the exit of the route Route is detailed routing configuration
<BrowserRouter>
{/* routing configuration */}
<Route></Route>
</BrowserRouter>
//The above writing method reports an error
Adjusted code structure
<BrowserRouter>
{/* routing configuration */}
<Routes>
<Route></Route>
</Routes>
</BrowserRouter>
Start configuring routing
<Route path="/admin" element={}></Route>
path routing path
Components of element routing
First-level routing after configuration
<BrowserRouter>
{/* routing configuration */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</BrowserRouter>
// same up and down
<BrowserRouter>
{/* routing configuration */}
<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
Use the built-in component Navigate to redirect
usage:
<Navigate to="/admin" />
to redirect the path of the route
replace Whether to replace the current routing path replace={true}
<Navigate to="/admin" replace={true} />
Routing configuration non-routing path into 404 components
//Import routing module
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
//Import routing component
import Admin from "./views/Admin";
import Login from "./views/Login";
import NotFound from "./views/not-found";
export default () => {
return (
<>
<BrowserRouter>
{/* routing configuration */}
<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>
</>
);
};
//or add 404 route
<BrowserRouter>
{/* routing configuration */}
<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>