React Layout VS Router
P粉387108772
P粉387108772 2023-09-11 13:01:22
0
1
547

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:

    {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粉387108772
P粉387108772

membalas semua(1)
P粉627136450

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:

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>
  );
};

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:

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan