React中如何使用变量名引用数组对象的指定属性？

在JavaScript中，点语法（obj.prop）只能访问字面量命名的属性，如果要通过变量动态访问对象属性，必须使用方括号语法（obj[variable]）。你代码里的data.abc是在找对象中名为abc的属性，而非变量abc对应的值（比如dev），所以要改成以下写法：

const data = [
  { id: 1, name: "John Doe", dev: "new", stage: "new" },
  { id: 2, name: "Victor Wayne", dev: "old", stage: "old" },
  { id: 3, name: "Jane Doe", dev: "freq", stage: "old" },
];

const abc = 'dev';
return (
  <div className="users">
    {data.map((item) => (
      {/* 必须添加key属性，React列表渲染要求唯一标识 */}
      <div key={item.id} className="user">
        {item[abc]}
      </div>
    ))}
  </div>
);

额外说明：

• 把map的参数从data改为item（或user），避免和外层数组变量data重名，提升代码可读性
• 方括号[abc]会先解析变量abc的取值（比如dev），再从item对象中获取对应属性的值
• 列表项必须添加key属性，这里使用每个对象的id作为唯一标识，符合React的渲染规范

内容的提问来源于stack exchange，提问作者Shankar Panda