#javascript #reactjs
#javascript #reactjs
Вопрос:
Код представляет собой общий обработчик переключения состояния компонента. Кажется, я не могу понять, почему первый набор кода создает новое свойство key name, в то время как второй набор кода использует принятый параметр.
controlToggle = (property) => {
this.setState({property: !this.state.property})
}
controlToggle = (property) => {
this.setState({[property]: !this.state.property})
}
Комментарии:
1. похоже, вам нужно вычисляемое имя свойства . если нет, вы принимаете ключ
property
вместо значения переменной.2. В первом примере вы передаете объект с ключом
property
, поэтому react установит его в состояние; то есть ключ для'property'
. Во втором,[property]
создаст ключ независимо от аргументаproperty
Ответ №1:
Вы используете []
при настройке или получении динамического ключа объекта. Если вы не укажете ключ внутри []
, он будет использовать имя переменной в качестве ключа внутри объекта, который в вашем случае является property
Так, например
controlToggle = (property) => {
this.setState({property: !this.state.property})
}
Приведенный выше код установит состояние с ключом как property
В то время как правильный способ
controlToggle = (property) => {
this.setState({[property]: !this.state[property]})
}
Ответ №2:
Я думаю, это потому, что в JavaScript
для такой пары ключ-значение, как {XXX: YYY}
, он автоматически обрабатывает первый XXX
как имя ключа / свойства значения, поэтому вам нужно добавить скобки [], чтобы «экранировать» этот шаблон, чтобы использовать значение переменной в качестве ключа вместо того, чтобы рассматривать его по существу как строку.
Более конкретно, материал внутри скобок [] будет обрабатываться как обычный код JavaScript и «вычисляться«