javascript - 在 React JS 中使用 key 属性

Question

我有一个来自 API 的值数组，它包含值列表。我将所有这些值映射到一组卡片中（如下面的代码中所述）。我需要提取所选元素的 id，它存储在key属性中。有没有办法使用/引用 key 属性的值？

{data.map((item) => (
          <Card key={item[0]} element={item} />
        ))}

我正在开发 KaiOS 应用程序，因此光标交互（onClick 或 onHover）受到限制。有一个 nav-focus 属性（使用自定义钩子维护），用于确定是否选择了当前元素并在此基础上使用 CSS 突出显示它（如下图所示）。我不想保持所选元素的状态，因为每次我在卡片中导航时都会更新它。

我想知道是否有办法使用所选项目的key 属性

Answer 1

在 html 中使用一个键。它将解决您建议的问题。它将通过 getAttribute 属性将所选项目作为属性获取。

<div>
      <select onChange = {this.onSelect}>
       <option key="1" language="english">English</option> 
       <option key="2" language="espanol">Espanol</option> 
            </select> 
</div>

现在 onSelect 函数将控制台记录所选语言：

onSelect=(event)=> {
    const selectedIndex = event.target.options.selectedIndex;
    console.log(event.target.options[selectedIndex].getAttribute('language'));
  }

Answer 2

我不想保持所选元素的状态，因为每次我在卡片中导航时都会更新它。

状态是正确的方法，为什么要不使用状态。

键应该用于唯一标识呈现为列表的项目，例如使用map()并且不应该像其他道具那样真正使用。