如何在将 React 模块转换为 ES6 时解决 `this` class

Question

我有一个 React 模块可以在 ES5 中正常工作。我将其转换为 ES6 并使用 6to5 进行转换。一切都很好，但是当我尝试设置 props 时出现运行时错误。当我放下 debugger 并查看 this 时，我看到 this 是 EventEmitter 而不是 class。这是我的代码：

var React = require('react');

import CalendarStore from './../stores/calendar.store.js';

function getAppointments() {
  return {appts: CalendarStore.getAppts()}
}

export default class extends React.Component{
  constructor(props) {
    super(props);
    this.props = {
      view: 'weeks'
    }
  }

  changeView(child, view) {
    this.setProps({view: view});
  }

  componentWillMount() {
     CalendarStore.addChangeListener(this._onChange);
  }

  _onChange() {
    this.setProps(getAppointments());
  }

  ....
};

我遇到问题的地方在我的 changeView 函数中。当它 transpiled 向下时，它看起来像这样：

  _onChange: {
      value: function _onChange() {
        this.setProps(getAppointments());
      },
      writable: true,
      configurable: true
    }

同样，在该函数中，this 是我的 EventEmitter。有什么办法可以解决这个问题？

Answer 1

this.setProps 已弃用，为此使用状态。它会在 0.13 中给你这个警告：

Warning: setProps(...) is deprecated in plain JavaScript React classes.

此外 es6 class 方法不是自动绑定的，因此您需要手动绑定它。您可以使用 .bind(this)，也可以使用箭头函数。不过，对于外部发射器，您确实需要保留参考。

你可以去掉 _onChange:

this._calendarListener = e => this.setState({things: e});
CalendarStore.addChangeListener(this._calendarListener);

或者在构造函数中绑定：

constructor(props){
   ...
   this._onClick = this._onClick.bind(this);
}

不要忘记在 componentWillUnmount:

中取消绑定事件

componentWillUnmount(){
    CalendarStore.removeChangeListener(this._onClick);
    // or 
    CalendarStore.removeChangeListener(this._calendarListener);
}

添加事件侦听器应该在 componentDidMount 中完成，而不是 componentWillMount。构造函数替换es6中的componentWillMount classes.

此代码非常糟糕...您正在覆盖道具反应集：

this.props = {
  view: 'weeks'
}

只需将代码中出现的所有 'props' 替换为 'state'，一切都会好起来的。您可能还需要商店的初始状态。

this.state = {
  view: 'weeks',
  things: CalendarStore.getAppts()
}

另外，createClass 不会很快消失，所以请继续使用它。它通常更简单。 Stores 通常应该由 mixin 处理，这对于 createClass 来说是微不足道的，但在 es6 classes 中更难做到。我有一个 mixins with react and es6 classes.

的小图书馆

如何在将 React 模块转换为 ES6 时解决 `this` class

How to resolve `this` in converting React module to ES6 class

ecmascript-6

reactjs