React 语义 UI 侧边栏问题答案

【问题标题】：React Semantic UI Sidebar IssueReact 语义 UI 侧边栏问题
【发布时间】：2017-12-21 13:56:21
【问题描述】：

我正在尝试从 react 语义 UI 实现交互式侧边栏，我从他们的网站上复制了代码，但我不太确定如何实现它：

import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarLeftScaleDown extends Component {

  state = { visible: false }

  toggleVisibility = () => this.setState({ visible: !this.state.visible })

  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
        <Sidebar.Pushable as={Segment}>
          <Sidebar as={Menu} animation='scale down' width='thin' visible={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>
            <Segment basic>
              <Header as='h3'>Application Content</Header>
              <Image src='/assets/images/wireframe/paragraph.png' />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

export default SidebarLeftScaleDown

然后我像这样从另一个类中调用它：

<SidebarLeftScaleDown/>

但我不断收到此错误：

[INFO] Module build failed: SyntaxError: C:/Users/611727594/Desktop/OverchargeSpringProject/src/main/js/sidebarLeftScaleDown.js: Unexpected token (6:12)
[INFO] 
[INFO]   4 | class SidebarLeftScaleDown extends Component {
[INFO]   5 | 
[INFO] > 6 |       state = { visible: false }
[INFO]     |             ^
[INFO]   7 | 
[INFO]   8 |       toggleVisibility = () => this.setState({ visible: !this.state.visible })
[INFO]   9 |

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

你需要在构造函数中初始化状态

class SidebarLeftScaleDown extends Component {
  constructor(props) {
    super(props);
    this.state = {visible: false}
  }

  toggleVisibility() {
    this.setState({ visible: !this.state.visible });
  }

  ...

}

【讨论】：

解决了错误但无法正确呈现，它只是显示为正常的html
很高兴能帮上忙！请接受答案（如果它有助于回答发布的问题）并针对您遇到的新问题发布新问题:)

【解决方案2】：

这是class properties，这是proposal in stage 2。
你需要一个 babel 插件babel-plugin-transform-class-properties。

或者你可以用普通的 ES6 语法来做，并在构造函数中初始化状态：

constructor(props) {
    super(props);
    this.state = {
       visible: false
    }
  }

【讨论】：