React一个ES6的语法错误

问题描述

问 题

var LikeButton = React.createClass({
  getInitialState() {
    return {switch: false};
  },
  handleClick(event) {
    this.setState({switch: !this.state.switch});
  },
  render() {
    var text = this.state.switch ? 'on' : 'off';
    return (
      <div onClick={this.handleClick}>
        On: {text}
      </div>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('container')
);

首先这是能运行的，然后我把它改成ES6的语法：

export class LikeButton extends React.Component {
  getInitialState() {
    return {switch: false};
  }
  handleClick(event) {
    this.setState({switch: !this.state.switch});
  }
  render() {
    var text = this.state.switch ? 'on' : 'off';
    return (
      <div onClick={this.handleClick}>
        On: {text}
      </div>
    );
  }
};

ReactDOM.render(
  <LikeButton />,
  document.getElementById('container')
);

就报错了，报错信息是

请问是什么语法错误？？谢谢~~

解决方案

把 export 去掉，另外应在constructor中定义state

 class LikeButton extends React.Component {
        constructor(props){
            super(props);
            this.state = {switch: false};
            this.handleClick = this.handleClick.bind(this);
         }
         handleClick(event) {
            this.setState({switch: !this.state.switch});
         }
         render() {
            let text = this.state.switch ? 'on' : 'off';
            return (
              <div onClick={this.handleClick}>
                On: {text}
              </div>
            );
          }
  }

这篇关于React一个ES6的语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！