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, и мне не нужно иметь 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

EDIT:

1.Вы можете использовать конструктор и передать реквизит в состояние. Если вы используете функции со стрелками, вам не нужно делать привязку для каждой функции (хотя создание функций и привязка компилируются быстрее, чем функции со стрелками).

2.Вы можете использовать реквизит внутри государства и сделать что-то вроде этого:

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

А затем используйте вместо этого состояние

3.Другое решение заключается в использовании hooks , который является новой функцией, которая позволяет использовать состояние в функциональных компонентах, а также использовать реквизиты, передавая их в качестве аргумента в объявлении функции. Таким образом, ваш компонент будет из этого:

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 (
    ....
  );
}

Answer 2

Вы должны перечислить все отдельно: (если вы хотите использовать в классе)

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

Но это кажется мне ненужным, вы, вероятно, хотели использовать в состоянии:

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

Но если вам нужно использовать где-то еще, вы можете сделать:

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