J'ai une question sur l'affichage ou le routage des composants dans React.
J'ai créé une section page d'accueil 布局，其中包含标题、左侧菜单和内容. L'idée est d'avoir une page où il vous suffit de modifier la section de contenu principale.
Je me demande si c'est une bonne approche et si je dois utiliser un routeur ou simplement un crochet pour ce faire.
Dans ce que j'ai fait, j'ai simplement utilisé le crochet useState pour définir le composant à afficher et aucun routeur n'était nécessaire, mais je me demande si c'est la bonne voie à suivre.
Cliquez sur le menu :
setContent(<QueryIndicators />)
J'ai une section Content qui montre le composant actuel :
const Login = () => {
const REACT_VERSION = React.version
const [collapsed, setCollapsed] = useState(true)
const [content, setContent] = useState(<QueryIndicators />)
return (
<Layout className="layout">
<Sider
className="layout__sider"
collapsible
collapsed={collapsed}
onCollapse={value => setCollapsed(value)}
>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
className="layout__sider-menu"
>
<Menu.Item
key="1"
icon={<HomeTwoTone twoToneColor={'#184287'} />}
onClick={() => setContent(<QueryIndicators />)}
>
Home
</Menu.Item>
<Menu.Item
key="2"
icon={<PlayCircleOutlined />}
onClick={() => setContent(<QueryExecutor />)}
>
Executor
</Menu.Item >
</Menu>
</Sider>
<Layout>
<Header className="layout__header">
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: 'trigger',
onClick: () => setCollapsed(!collapsed)
}
)}
<h1
className="layout__header-text"
title={'React:' + REACT_VERSION}
>
POA Console HOME
</h1>
</Header>
<Content className="layout__content">{content}</Content>
</Layout>
</Layout>
)
}
export default Login
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La manière dont vous souhaitez appliquer une logique conditionnelle pour afficher/rendre le contenu en fonction de l'interaction de l'utilisateur est subjective, mais vous avez le choix.
Utiliser l'état local
Utiliser l'état local semble bien, mais je vous préviens, stocker JSX dans l'état, stocker certaines données (comme une référence à un composant) et le mapper est considéré comme un anti-modèle React pour déclarer le JSX que vous souhaitez restituer.
Exemple :
const QUERY_CONTENT = { QueryExecutor, QueryIndicators, } const Login = () => { const REACT_VERSION = React.version; const [collapsed, setCollapsed] = useState(true); const [QueryContent, setQueryContent] = useState(QUERY_CONTENT.QueryIndicators); return ( <Layout className="layout"> <Sider className="layout__sider" collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)} > <Menu mode="inline" defaultSelectedKeys={['1']} className="layout__sider-menu" > <Menu.Item key="1" icon={<HomeTwoTone twoToneColor={'#184287'} />} onClick={() => setQueryContent(QUERY_CONTENT.QueryIndicators)} > Home </Menu.Item> <Menu.Item key="2" icon={<PlayCircleOutlined />} onClick={() => setQueryContent(QUERY_CONTENT.QueryExecutor)} > Executor </Menu.Item > </Menu> </Sider> <Layout> <Header className="layout__header"> {React.createElement( collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { className: 'trigger', onClick: () => setCollapsed(collapsed => !collapsed) } )} <h1 className="layout__header-text" title={'React:' + REACT_VERSION} > POA Console HOME </h1> </Header> <Content className="layout__content"> <QueryContent /> </Content> </Layout> </Layout> ); };Utiliser les directions
Si vous souhaitez utiliser le composant
react-router和路由来管理内容的条件渲染，则将该组件转换为一个布局组件，该布局组件为嵌套渲染一个Outletpour restituer l'itinéraire. Le routeur/routeur gérera la correspondance des itinéraires et restituera le contenu de l'itinéraire spécifique.Exemple :
import { Outlet, useNavigate } from 'react-router-dom'; const REACT_VERSION = React.version; const AppLayout = () => { const navigate = useNavigate(); const [collapsed, setCollapsed] = useState(true); return ( <Layout className="layout"> <Sider className="layout__sider" collapsible collapsed={collapsed} onCollapse={setCollapsed} > <Menu mode="inline" defaultSelectedKeys={['1']} className="layout__sider-menu" > <Menu.Item key="1" icon={<HomeTwoTone twoToneColor={'#184287'} />} onClick={() => navigate("/queryIndicators")} > Home </Menu.Item> <Menu.Item key="2" icon={<PlayCircleOutlined />} onClick={() => navigate("/queryExecutor")} > Executor </Menu.Item > </Menu> </Sider> <Layout> <Header className="layout__header"> {React.createElement( collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { className: 'trigger', onClick: () => setCollapsed(collapsed => !collapsed) } )} <h1 className="layout__header-text" title={'React:' + REACT_VERSION} > POA Console HOME </h1> </Header> <Content className="layout__content"> <Outlet /> // <-- nested routes render here </Content> </Layout> </Layout> ); }import { Routes, Route } from 'react-router-dom'; const App = () => { ... return ( ... <Routes> ... <Route element={<AppLayout />}> ... <Route path="/queryIndicators" element={<QueryIndicators />} /> <Route path="/queryExecutor" element={<QueryExecutor />} /> ... </Route> ... </Routes> ... ); };import { BrowserRouter as Router } from 'react-router-dom'; ... <Router> <App /> </Router>