语义UI React侧边栏可推送功能

Posted 2023-01-12

我想创建一个只适用于桌面的左侧栏（最小宽度1200px），在其他情况下（平板电脑、手机），需要隐藏侧栏。我使用的是 语义UI中的侧边栏可推送React.

我试过这个演示，但不工作。

              <Sidebar.Pushable as=Segment>
                        <Sidebar
                            as=Menu
                            animation='push'
                            icon='labeled'
                            inverted
                            vertical
                            visible=window.innerWidth >= 1200 ? true : false
                            width='thin'
                        >
                            <Menu.Item as='a'>
                                <Icon name='home' />
                                Home
                            </Menu.Item>
                            <Menu.Item as='a'>
                        <Sidebar.Pusher>
                            <Segment basic>
                                 //CONTENT
                                
                            </Segment>
                        </Sidebar.Pusher>
                    </Sidebar.Pushable>

别人有同样的问题吗？非常感谢！阿曼多

答案

问题不在于渲染加载时间。问题在于，除非组件的状态发生变化，否则React不会重新渲染该组件。由于您直接将可见道具与window.innerWidth绑定，因此对于该组件来说，状态并没有发生变化，因此不会重新渲染。请查看这个链接与工作代码沙盒https:/codesandbox.iossemantic-ui-example-xqhjl?file=example.js。