Question

下面的代码由于开玩笑而失败，我得到了unexpected token error

export default class Search extends Component {
  state = { // problem is here
    q: ''
  }

  onChange = e => {
    this.setState({
      q: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input onChange={this.onChange} placeholder="search" />
      </div>
    )
  }
}

我正在使用babel-7，是否需要插入任何玩笑？

我使用的是笑话版本^ 23.6.0

Answer 1

要么使用构造函数，然后使用this.state定义状态：

constructor(props) {
    super(props)    
    this.state = {
        q: ''
    }
}

或使用https://www.npmjs.com/package/babel-plugin-transform-class-properties。

Class字段仍是第3阶段的提案https://github.com/tc39/proposal-class-fields

Answer 2

如果要使用类属性，则需要添加babel-plugin-transform-class-properties。因此，请安装它，然后确保将其作为插件添加到.babelrc文件中，如下所示：

  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

开玩笑不能在反应中穿透静态

2 个答案: