条件渲染以选择显示设置答案

【问题标题】：Conditional rendering to choose display setup条件渲染以选择显示设置
【发布时间】：2021-12-06 06:24:04
【问题描述】：

更新

我找到了一个不同的解决方案 - 页面“响应性”不起作用。添加后： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 正如@adabala-rama-krishna 在另一个问题中建议的那样，它正在按我的意愿工作。 link

无论如何-如果有人有语法问题的解决方案，我会很高兴听到它。

在我的反应应用程序中，我正在尝试更改移动或桌面的显示并在需要时添加列：

      {isTabletOrMobile
        ? <br />
        : <></Col><Col></>
      }

整页代码：link

（在这里使用 react-bootstrap..）

因为结束标记在开始标记之前，所以会引发语法错误。

周围还有吗？

也许有更好的方法？？

谢谢大家！

【问题讨论】：

<></Col><Col></> 是你想要的吗？或者是<><Col></Col></>
第一个。如果屏幕很大，它会将内容分成两列。如果没有，它会保持一个。
你能提供更多代码吗？
给你：link

标签： reactjs jsx react-bootstrap conditional-formatting conditional-rendering

【解决方案1】：

如果你想有条件地渲染列，那么你必须这样做。

<Row>
 {isTabletOrMobile
        ? <Col>1</Col>
        :<><Col>1 of 2</Col>
         <Col>2 of 2</Col></>
      }
</Row>

另请注意，您必须关闭最后一列，例如 <Col></Col>

【讨论】：

无论如何我都想要所有内容，只是有条件地拆分...
请用足够的代码更新问题。你问的其实可以这样做
好的。刚刚更新了一切。如果您知道在这种特定情况下该怎么做，我会很高兴听到。谢谢！