我對在 React 中顯示或路由元件有疑問。
我設定了一個主頁佈局
,其中包含標題
、左側
選單和內容
部分。我們的想法是擁有一個頁面,您只需更改主要內容部分。
我想知道這是否是一個好方法,以及我是否必須使用路由器或僅使用鉤子來執行此操作。
在我所做的中,我只是使用 useState
掛鉤來設定要顯示的元件,並且不需要路由器,但我想知道這是否是正確的方法。
在選單上點選:
setContent(<QueryIndicators />)
我有一個顯示目前元件的 Content
部分:
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
P粉6271364502023-09-12 00:56:42
您想要如何應用條件邏輯來基於使用者互動顯示/渲染內容是主觀的,但您有多種選擇。
使用本地狀態似乎沒問題,但我會警告你,在狀態中儲存 JSX、儲存一些資料(例如對元件的引用)並映射它被認為是 React 反模式聲明你想要渲染的 JSX。
範例:
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> ); };
如果您想使用react-router
和路由來管理內容的條件渲染,則將該元件轉換為佈局元件,該佈局元件會為嵌套渲染一個Outlet
元件要渲染的路線。路由器/路由將管理路由匹配並渲染特定的路由內容。
範例:
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>