语义 UI 侧边栏不会显示 - React

Question

我目前正在使用 React 中的语义 UI 在我的 AppBar 上实现侧边栏。到目前为止，我已经记下了：

import React, { Component } from 'react'
import { Menu, Segment, Dropdown, Icon, Button, Sidebar, Dimmer } from 'semantic-ui-react'
import { LogInButtonEX } from './LogInButton.jsx'
import { IndicateursEX } from './Indicateur.jsx'
/*import { SidebarMenuEX } from './Sidebar.jsx'*/

export class AppBarEX extends Component {
  state = { activeItem: 'home', visible: false, dimming: false }

  constructor (props) {
    super(props);
    this.bringupsidebar = this.bringupsidebar.bind(this);
    this.hidesidebar = this.hidesidebar.bind(this);
  }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  bringupsidebar () {
      this.state.visible = !this.state.visible;
      this.state.dimming = true;
  }

  console_output(){
      console.log("sidebar brought up and visible set to: ")
      console.log(this.state.visible)
      console.log("dimming set to: ")
      console.log(this.state.dimming)
  }

  hidesidebar () {
      this.state.visible = !this.state.visible;
      if (this.state.dimming === true) 
      {
        this.state.dimming = false;
      }
      else
      {
        this.state.dimming = true;
      }
  }

  render() {
    const { activeItem } = this.state.activeItem

return (
<div>

  <Segment inverted>
    <Menu inverted pointing secondary>
      <Menu.Item>
        <Icon name='list layout' size = 'large' onClick={this.bringupsidebar}/>
      </Menu.Item>
        <Segment basic>
          <Dropdown item text='Home'>
            <Dropdown.Menu>
                <Dropdown.Item>New Account</Dropdown.Item>
                <Dropdown.Item>Help</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
        </Segment>

      <Menu.Menu position = 'right'>
          <Menu.Item>
              <Icon name='alarm' size = 'large'/>
          </Menu.Item>
        <Menu.Item name='Contracts' active={activeItem === 'messages'} onClick={this.handleItemClick} />
        <Menu.Item name='Account' active={activeItem === 'friends'} onClick={this.handleItemClick} />
        <Menu.Item>
          <Icon name='id badge' size = 'large'/>
        </Menu.Item>
      </Menu.Menu>
    </Menu>
  </Segment>


  <Sidebar
        as={Menu}
        animation='overlay'
        width='thin'
        direction='left'
        visible={this.state.visible}
        icon='labeled'
        vertical
        inverted
  >
    <Menu.Item name='home'>
      <Icon name='home' />
      Home
    </Menu.Item>
    <Menu.Item name='gamepad'>
      <Icon name='gamepad' />
      Games
    </Menu.Item>
    <Menu.Item name='camera'>
      <Icon name='camera' />
      Channels
    </Menu.Item>
  </Sidebar>


  <Sidebar.Pusher onClick = {this.hidesidebar} >
    <Dimmer.Dimmable as={Segment} dimmed={this.state.dimming}>
      <IndicateursEX/>
    </Dimmer.Dimmable>
  </Sidebar.Pusher>
</div>
)

} }

所以我遇到的问题比较简单，就是侧边栏不显示。它在那里，你可以通过浏览器开发者面板中的元素浏览器看到它，但它不会显示。

我检查了我正在使用的状态变量，它们的值设置正确。当侧边栏的图标按钮被单击时，visible 设置为 true，因此变暗并相应地关闭。

我怀疑问题一定出在设置属性（例如：dimmed = {this.state.dimming} 或位置不正确的侧边栏本身？元素本身没有出现在屏幕上，但我可以找到它在元素列表中：

脚本的渲染部分在别处，但效果很好，所以我认为没有必要在这里包含它。

任何帮助将不胜感激！！

Answer 1

在 React 中，您使用触发组件重新渲染的 this.setState() 方法更改状态。如果直接给 this.state.something = value 赋值，状态会改变，但 DOM 不会。

https://codesandbox.io/s/N9X4lWQkK

语义 UI 侧边栏不会显示 - React

Semantic UI sidebar won't show - React

javascript

web

reactjs

semantic-ui

semantic-ui-react