Reagieren Sie auf Layout vs. Router

Question

Ich habe eine Frage zum Anzeigen oder Weiterleiten von Komponenten in React. Ich habe einen Homepage-Bereich 布局，其中包含标题、左侧菜单和内容 eingerichtet. Die Idee besteht darin, eine Seite zu haben, auf der Sie nur den Hauptinhaltsbereich ändern müssen. Ich frage mich, ob das ein guter Ansatz ist und ob ich dafür einen Router oder nur einen Hook verwenden muss.

Bei dem, was ich getan habe, habe ich nur den useState-Hook verwendet, um die anzuzeigende Komponente festzulegen, und es war kein Router erforderlich, aber ich frage mich, ob das der richtige Weg ist.

• Klicken Sie auf das Menü:

  setContent(<QueryIndicators />)

• Ich habe einen Content-Bereich, der die aktuelle Komponente anzeigt:

  {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

Answer 1

您想要如何应用条件逻辑来基于用户交互显示/渲染内容是主观的，但您有多种选择。

使用本地状态

使用本地状态似乎没问题，但我会警告你，在状态中存储 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>