Saya ada soalan tentang memaparkan atau menghala komponen dalam React.
Saya menyediakan bahagian halaman utama 布局
,其中包含标题
、左侧
菜单和内容
. Ideanya ialah untuk mempunyai halaman di mana anda hanya perlu menukar bahagian kandungan utama.
Saya tertanya-tanya sama ada ini pendekatan yang baik dan jika saya perlu menggunakan penghala atau hanya cangkuk untuk melakukan ini.
Dalam apa yang saya lakukan, saya hanya menggunakan cangkuk useState
untuk menetapkan komponen untuk dipaparkan dan penghala tidak diperlukan, tetapi saya tertanya-tanya sama ada ini cara yang betul untuk pergi.
Klik pada menu:
setContent(<QueryIndicators />)
Saya mempunyai bahagian Content
yang menunjukkan komponen semasa:
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
Cara anda mahu menggunakan logik bersyarat untuk memaparkan/memberi kandungan berdasarkan interaksi pengguna adalah subjektif, tetapi anda mempunyai pilihan.
Gunakan negeri tempatan
Menggunakan keadaan setempat nampaknya baik, tetapi saya akan memberi amaran kepada anda, menyimpan JSX dalam keadaan, menyimpan beberapa data (seperti rujukan kepada komponen) dan memetakannya dianggap sebagai anti-corak React untuk mengisytiharkan JSX yang anda ingin berikan.
Contoh:
Gunakan Arahan
Jika anda ingin menggunakan komponen
react-router
和路由来管理内容的条件渲染,则将该组件转换为一个布局组件,该布局组件为嵌套渲染一个Outlet
untuk memberikan laluan. Penghala/penghala akan mengurus padanan laluan dan memberikan kandungan laluan tertentu.Contoh: