条件渲染以选择显示设置

Posted

技术标签:

【中文标题】条件渲染以选择显示设置【英文标题】: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..)

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

周围还有吗?

也许有更好的方法??

谢谢大家!

【问题讨论】:

&lt;&gt;&lt;/Col&gt;&lt;Col&gt;&lt;/&gt; 是你想要的吗?或者是&lt;&gt;&lt;Col&gt;&lt;/Col&gt;&lt;/&gt; 第一个。如果屏幕很大,它会将内容分成两列。如果没有,它会保持一个。 你能提供更多代码吗? 给你:link 【参考方案1】:

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

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

另请注意,您必须关闭最后一列,例如 &lt;Col&gt;&lt;/Col&gt;

【讨论】:

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

以上是关于条件渲染以选择显示设置的主要内容,如果未能解决你的问题,请参考以下文章

详解React 的几种条件渲染以及选择

如何以不同的条件选择相同的字段两次并将结果显示为单独的字段

报表表格控件条件设置

条件渲染以在 vue 中显示组件

最后显示mipmap某一级别纹理时 这个级别是gpu选择的还是写的渲染程序里设置的

jQM 选择预渲染?