React 语义 UI 侧边栏问题

Question

我正在尝试通过 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

然后我从另一个 class 调用它，像这样：

<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 |

Answer 1

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

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

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

  ...

}

Answer 2

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

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

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

React 语义 UI 侧边栏问题

React Semantic UI Sidebar Issue

reactjs

semantic-ui

semantic-ui-react