В настоящее время я реализую боковую панель на своей панели приложений, используя семантический пользовательский интерфейс в React. До сих пор я получил это:
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}
, либо с самой боковой панели, которая расположена неправильно? Сам элемент не отображается на экране, хотя я могу найти его в списке элементов как таковой:
Рендеринговая часть скрипта находится где-то в другом месте, но работает хорошо, поэтому я не думаю, что будет необходимо включать ее сюда.
Любая помощь приветствуется!!