javascript - ES6 在构造函数之外解构赋值

Question

我正在开发一个基于 react 的项目，并使用 ES6 和 babel 转译工具和插件。我知道类构造函数内的解构赋值，如下所示:

~~~
constructor(props){
  super(props);

  ({
    name: this.name,
    family: this.family
  } = props);
}
~~~

上面的代码代替了 this.name = props.name; 和 this.family = props.family;。

但我不使用构造函数，因为我使用了 babel-plugin-transform-class-properties ，并且我不需要构造函数，this .state 并将 this 绑定(bind)到每个类函数。我只是声明 state 并将函数声明为箭头函数，请参阅以下示例:

class Sample extends React.PureComponent {
  state = {
    ~~~
  };

  handleSample = () => { ~~~ };

  ~~~
}

但现在我不知道如何在类体内的构造函数之外解构我的 this.props ，并将它们添加到 this 中。我测试了一些尝试，但它们有语法错误:

({
  name: this.name,
  family: this.family
} = this.props);

怎么写呢？

Answer 1

您必须单独列出所有内容:(如果您想在类里面使用)

name = this.props.name
family = this.props.family

但这对我来说似乎没有必要，你可能想在状态下使用:

state = {
  name: this.props.name
  family: this.props.family
}

但是如果您需要在其他地方使用，您可以这样做:

render() {
  const { name, family } = this.props