在 React 中使用空列有啥意义？

Posted 2023-02-22

【中文标题】在 React 中使用空列有啥意义？

【英文标题】：What is the point of using an empty column in React?在 React 中使用空列有什么意义？

【发布时间】：2020-10-09 18:45:09

【问题描述】：

我无法让这段代码运行，所以我试图通过查看它来弄清楚它的作用。那么，有人可以向我解释这里发生了什么吗？哪里有两列但一列是空的？

另外，我认为无论触发什么路由，内容都会显示在第 2 列中，这是否正确？ Routes 组件只是一个带有大量 Routes 的 Switch。

    <BrowserRouter>
      <NavigationBar />
      <Route exact path="/" component=LoginComponent />
      <Container fluid="true">
        <Row>
          <Col xs=0 sm=0 md=0 lg=0 xl=1 />
          <Col xs=12 sm=7 md=8 lg=9 xl=8>
            <Alert />
            <Route component=Routes />
          </Col>
          <UserPanel />
        </Row>
      </Container>
    </BrowserRouter>

【参考方案1】：

在 React 中使用空列有什么意义？

显然，当屏幕尺寸特别大时，他们希望屏幕上有一些空白空间。

另外，我认为无论触发什么路由，内容都会显示在第 2 列中，这是否正确

从您对Routes 中代码的描述来看，这似乎是正确的。

【讨论】：

好的，谢谢，我知道这是一个非常愚蠢的问题。由于我无法让代码运行，我只需要确定。

【参考方案2】：

我的猜测是空 col 被用作 xl 屏幕上的占位符。 您应该阅读源代码以了解组件的作用，然后您就可以理解而不是猜测重点。

至于您的第二个问题，react router docs 表示：

没有路径的路由总是匹配的。

因此，无论 Routes 组件渲染什么 - 它都会在任何给定路由上渲染。