Question

我正在努力将以下代码更改为等效的ES6语法。

export default class EventSessionItem extends Component {
    state = {
        isDetailsVisible: false,
    };

    revealDetails = () => {
        this.setState({isDetailsVisible: true});
    };

我原以为以下是转换，但显然不是。这一切都因为语法错误而变红了。

export default class EventSessionItem extends Component {

  constructor() {
    isDetailsVisible = false;
  }

  function revealDetails  {
    this.setState({isDetailsVisible: true});
  };

Answer 1

我认为这就是你想要的。假设你正在使用React。

export default class EventSessionItem extends Component {

  constructor(props) {
    super(props);

    this.state = {
      isDetailsVisible: false
    }

    this.revealDetails = this.revealDetails.bind(this);
  }

  revealDetails() {
    this.setState({isDetailsVisible: true});
  }
}

您在第一个示例state =和revealDetails = () =>中使用的两个类字段尚未成为标准的一部分。 https://github.com/tc39/proposal-class-fields

Answer 2

您的类初始化程序的代码涉及构造函数中的属性赋值：

export default class EventSessionItem extends Component {
  constructor(...args) {
//^^^^^^^^^^^
    super(...args);

    this.state = {
//  ^^^^^
        isDetailsVisible: false,
    };

    this.revealDetails = () => {
//  ^^^^^
        this.setState({isDetailsVisible: true});
    };
  }
}

Answer 3

按照此方法进行一些修复：

class Component {}
class EventSessionItem extends Component {

  constructor() {
    super();
    this.isDetailsVisible = false;
  }

  setState(newState) {
    this.isDetailsVisible = newState;
  }
  
  // This is to illustrate!
  getState() {
    return this.isDetailsVisible;
  }

  revealDetails() {
    this.setState({
      isDetailsVisible: true
    });
  };
}

var esi = new EventSessionItem();
esi.revealDetails();
console.log(esi.getState());

.as-console-wrapper { max-height: 100% !important; top: 0; }

转换回JavaScript中的ES6类

3 个答案: