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，并且不需要具有constructor，this.state并将this绑定到每个类函数。我只声明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

Answer 2

编辑：

1。您可以使用构造函数并将道具传递给状态。如果使用箭头功能，则不必对每个功能都进行绑定。（尽管创建功能和绑定的编译速度比箭头功能要快）。

2。您可以在州内使用道具并执行以下操作：

state={prop1: this.props.prop1,prop2: this.props.prop2,...}

然后使用状态代替

3。另一个解决方案是使用hooks，这是一项新功能，使您可以在功能组件中使用状态，还可以通过将props作为参数传递给函数声明来使用props。因此，您的组件将变为：

class Example extends React.Component {
  state = {
   .....
  }
  .
  .
  .
  render() {
    const {prop1, prop2, ...}=this.props
    return {......};
  }
}

对此：

 function Example(props) {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  const {prop1, prop2, ...} = props;
  .
  .
  .
  return (
    ....
  );
}

ES6在构造函数之外的解构分配

2 个答案: