Question

我正在尝试从反应语义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 |

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，proposal in stage 2 你需要一个babel插件babel-plugin-transform-class-properties。

或者您可以使用正常的ES6语法执行此操作并初始化构造函数中的状态：

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

反应语义UI边栏问题

2 个答案: