React中能否访问map生成的key值？如何在代码中实现？

完全可以实现你要的逻辑，核心是：你不需要从生成的JSX元素上去找那个"key值"，因为它本来就来自你迭代的数据源，直接在map的回调函数里用原始值就行。

举几个常见场景的例子：

1. 遍历数组的情况 #

假设你有一个元素数组，map时用元素值作为key：

const fruits = ['apple', 'banana', 'orange'];

return (
  <ul>
    {fruits.map(fruit => {
      // 这里的fruit就是你说的"key对应的取值"，直接判断
      if (fruit === 'banana') {
        return <li key={fruit} className="highlight">{fruit}</li>;
      }
      return <li key={fruit}>{fruit}</li>;
    })}
  </ul>
);

如果是用索引当key（不推荐，但如果必须用），同样直接用索引值判断：

fruits.map((fruit, index) => {
  if (index === 1) { // 对应第二个元素banana
    return <li key={index} className="highlight">{fruit}</li>;
  }
  return <li key={index}>{fruit}</li>;
});

2. 遍历对象键值对的情况 #

如果是处理对象的键值，先把对象转成键值对数组再遍历：

const user = { name: 'Bob', age: 30, job: 'Engineer' };

return (
  <div>
    {Object.entries(user).map(([key, value]) => {
      // 这里的key就是你要判断的标识
      if (key === 'age') {
        return <p key={key}>年龄：{value}（已满18岁）</p>;
      }
      return <p key={key}>{key}：{value}</p>;
    })}
  </div>
);

重要提醒 #

不要尝试通过组件props或者DOM ref去获取JSX元素的key属性——React把key作为内部优化的标识，不会将其暴露给组件的外部访问。所有你需要判断的逻辑，都应该在map的回调函数里完成，直接使用迭代时的原始数据即可。

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