React代码中[name]:value的方括号语法有何用途？

嘿，这个问题问得好！我刚接触ES6语法的时候也对这个写法感到陌生，咱们来把它彻底搞清楚～

首先，你猜的没错，它和object["property"]确实有联系，但它是ES6新增的计算属性名语法，专门用来在定义对象的时候，动态设置属性名。

先回忆你熟悉的写法 #

你知道const { name, value } = event.target是解构赋值，拿到了输入框的name属性（比如你的输入框可能是<input name="username" />）和对应的value。

如果用ES5的写法，要把这个动态的属性名加到state里，你得这么写：

handleChange = event => {
  const { name, value } = event.target;
  const newState = {};
  newState[name] = value;
  this.setState(newState);
}

得先创建一个空对象，再用对象[变量]的方式赋值，最后把这个对象传给setState。

ES6的计算属性名简化了这个过程 #

而你看到的[name]: value就是ES6的语法糖，允许你在定义对象字面量的时候直接用变量作为属性名，不用再额外创建对象再赋值。它和上面ES5的写法效果完全一样，但代码更简洁。

举个更直白的例子：

const key = "age";
const person = {
  [key]: 25
};
// 等价于 const person = { age: 25 };

这里的[key]会把变量key的值（也就是"age"）作为对象的属性名，而不是把"key"本身作为属性名。

回到你的React代码 #

在你的handleChange里，假设用户输入的是一个name为"email"的输入框，那么event.target.name就是"email"，event.target.value是用户输入的内容，这时候{ [name]: value }就会变成{ email: '用户输入的邮箱' }，然后setState就会把state里的email属性更新为对应的值——这正好实现了一个通用的表单输入处理函数，不管你有多少个输入框，只要设置好name属性，这个函数都能处理，不用为每个输入框写单独的处理逻辑。

总结一下 #

• [变量名]在对象字面量里是计算属性名，ES6新增语法
• 作用是动态设置对象的属性名，属性名由变量的值决定
• 和你熟悉的object[变量]是一个逻辑，但更适合在创建对象的时候直接使用

内容的提问来源于stack exchange，提问作者Samuel Hulla