React中如何为div添加id用于比较？遇id未定义错误

给div添加id用于判断比较时，触发「id is not defined」错误；换成添加key也触发「key is not defined」错误，报错位置在函数的id === quoteData.id判断语句处。

相关截图 #

• 数据结构：
• 函数代码：
• 绑定id的div代码：

1. 绑定id/key时要使用正确的变量
   从截图看，你直接写了:id="id"，但当前代码作用域里没有定义id变量。如果是在循环列表，要绑定循环项的id属性，比如遍历quoteData时：

   <div v-for="item in quoteData" :key="item.id" :id="item.id" @click="toggleQuote(item.id)">
     <!-- 元素内容 -->
   </div>
   

2. 修正函数的参数传递
   函数里的id === quoteData.id报错，是因为函数没有接收id参数。修改函数，让它接收点击元素的id，再做判断：

   const toggleQuote = (id) => {
     // 若quoteData是ref响应式数据，需取其value属性
     if (id === quoteData.value.id) {
       // 执行你的业务逻辑
     }
   }
   

3. key的正确使用
   Vue中key是循环元素的唯一标识，必须绑定循环项的唯一值（比如item.id），不能用未定义的key变量，否则同样会触发未定义错误。

内容的提问来源于stack exchange，提问作者רונן סימנדוייב