Question

我的代码中出现语法错误，我不确定原因。是否与我使用refs的方式有关？

export default class ToggleMenu extends React.Component {

  showRight: function() {
    this.refs.right.show();
  }

  render() {
    return (
      <div>
      <button onClick={this.showRight}>Show Left Menu!</button>
      {/*  
        <Menu ref="right" alignment="right">
          <MenuItem hash="1">First</MenuItem>
          <MenuItem hash="2">Second</MenuItem>
          <MenuItem hash="3">Third</MenuItem>
        </Menu> 
      */}
      </div>
    );
  }
}

这是错误：

./src/components/ToggleMenu/ ToggleMenu.js模块构建失败：SyntaxError：意外的令牌（13:14）
showRight: function() {
  this.refs.right.show();  
}

Answer 1

你得到的对象文字和课程混在一起。您的代码位于类中，而不是对象文字中，因此您必须像使用render一样使用方法定义语法。类只能包含原型方法和构造函数（从ECMAScript 2015开始）：

showRight() {
  this.refs.right.show();
}

否则它将被解释为label和函数声明，但具有function关键字的函数声明不能在类体中，因此语法错误：

showRight: //label
function() { //function declaration, not valid in class body!
    ...
}

另外，请务必{}向您的方法bind(this)，以便this引用组件而不是全局范围的this值：

constructor(props) {
  super(props);
  this.showRight = this.showRight.bind(this);
}

在MDN上阅读有关class bodies的更多信息。

关于ref的使用，您应该使用回调而不是普通字符串：

<Menu ref={right => this.right = right} alignment="right">

然后在showRight：

this.right.hide();

为什么我的React组件类中存在语法错误？

1 个答案: