Деструктуризация пропов внутри реактивного состояния
Я добавил конфигурацию airbnb для eslint, которая поощряет деструктуризацию свойств и состояний, мне это нравится, но я наткнулся на одну проблему, когда определяю состояние в своем компоненте.
class MyComponent extends Component {
state = {
animation: this.props.active ? 1 : 0
}
Я получаю ошибку
[eslint] Must use destructuring props assignment (react/destructuring-assignment)
Я не уверен, как мне здесь правильно разрушить active из пропсов?
Обычно const {active} = this.props работает, но всякий раз, когда я помещаю его в состояние или около него, я получаю неожиданную синтаксическую ошибку.
@JonasW. gotcha, ну, если я проигнорирую это, он проигнорирует его везде, или у меня будет много комментариев по отключению eslint: / идея, можно ли как-то отключить глобально для state = {pattern?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Единственное, что можно сохранить внутри свойства класса, - это использовать геттер (который будет вызываться при первом рендеринге):
state = {
get animation() {
const { active } = this.props;
return active ? 1 : 0;
}
}
Или вы используете IIFE для инициализации свойства:
state = (() => {
const { active } = this.props;
return { animation: active ? 1 : 0 };
})()
Но на самом деле это немного сложно. Другое решение - переместить свойство в конструктор:
constructor(...args) {
super(...args);
const { active } = this.props;
this.state = { animation: active ? 1 : 0 };
}
Но лично я бы просто проигнорировал это предупреждение здесь.
В блоке кода IIFE есть дополнительная скобка. ;)
Что означает ... args (тройные точки перед аргументами)?
@ FMaz008, это аргумент остаточный параметр или спред
Вы можете добавить это правило в .eslintrc.json
"rules": {
"react/destructuring-assignment": [
"error",
"always",
{
"ignoreClassFields": true
}
]
},
вам нужно переместить его в конструктор ... или вы просто проигнорируете предупреждение