React.JS组件类中的函数未定义错误

Question

我写了一个带有构造函数，方法和渲染的react组件。 当我注释掉方法并且只使用render和构造方法时，一切都很好，但是当我添加方法时，除非我在构造方法之后关闭整个类，否则第一个方法总是以未定义的形式出现。

这是我的课程（因为为简单起见，我只放方法声明什么都无所谓）：

export default class App extends Component {

  constructor(props) {
    super(props);
    const allWords = ["word", "pipe", "dear", "deer", "fish", "coat"];
    const word= allWords[Math.floor(Math.random()*allWords.length)];
    var lettersFound = [];
    for (var i=0; i<word.length;i++) {
      lettersFound = [...lettersFound, [i, "_"]];
    }
    this.fillWord = this.fillWord.bind(this);

    this.state = {
      word: word,
      numWrongGuesses: 0,
      lettersGuessed: [],
      lettersFound: lettersFound,
      error: ""
    }
  }

  isLetterInWord = (letter) => {
  }

  fillWord = () => {
  }



  handleGuess = (letter) => {
  }

  render () {
    return (
      <div className="App">
      </div>
    );
  }

}

这不会编译，并给出错误“'isLetterInWord'未定义”。 如果我删除此功能，则会在fillWord上引发错误。 如果在构造函数之后添加“}”，则所有方法均已定义，但render在返回行上引发意外的令牌错误。 我不明白为什么我要在构造函数之后关闭该类，或者为什么它不按原样进行编译。

Answer 1

在这里，您正在定义类属性，当前（我认为）是第3阶段的建议。 换句话说，默认情况下不支持。 可能是因为这个原因，您遇到了错误。 您可以使用Babel的class-properties-transform插件来添加对此语法的支持，如果您愿意的话。

isLetterInWord = (letter) => {
  }

  fillWord = () => {

  }

尝试将方法定义为，看看是否可行

isLetterInWord(letter) {

}

Answer 2

尝试将函数绑定到构造函数中，如下所示：

this.isLetterInWord = this.isLetterInWord.bind(this);
this.fillWord = this.fillWord.bind(this)
this.handleGuess = this.handleGuess.bind(this);