更改数组 React 的多个项目的 id答案

【问题标题】：Change id of multiple item of array React更改数组 React 的多个项目的 id
【发布时间】：2020-12-14 21:15:12
【问题描述】：

我正在使用带有 Hooks 的 React JSX，但我遇到了问题。当我单击其中一个时，我想更改所有矢量项的 p id。特别是：

我有一个向量，对于这个向量的每个项目，我都调用一个组件： cards.map((item, index) => (<Card key={index} card={item} index={index} hover={hover} /> ))}
在卡片组件中，我有带有 onClick 事件的 div 标签： <div onClick={TitleTransition}>
TitleTransition 函数改变点击状态： function TitleTransition() { setClick(true);}
这是 Card 组件内的 p 标签： <p id={click ? "titleTransition" : ""}>{props.card.p1}</p>

因此，当我点击 其中一个 项目（我称它们为卡片）时，我想更改所有项目（卡片）的 p id .

有人可以帮助我吗？谢谢！

【问题讨论】：

动态 ID 是一种不好的代码味道，多个元素上的重复 ID 是无效的 HTML
感谢您的回答。那么，我该怎么做呢？
至少可以先修复无效的 HTML 吗？

标签： javascript css reactjs components jsx

【解决方案1】：

这更像是一个猜测答案，但我无法在 50 声望之前发表评论。如果我不得不猜测，我会说您正在尝试更改卡组件上的 onClick 样式，并且可能还重置其他卡的样式。在这种情况下，您应该尝试使用 style 或 className 属性而不是 p 标签的 id 属性。我想你有一个类似于

的css文件

#titleTransition {
/* Your styling if element is clicked */
}

如果您使用 className 属性，它是 html 类属性的 React 等效项，您必须将您的 css 行更改为类似

.titleTransition {
/* Your styling if element is clicked */
}

或

  :global(.titleTransition) {
    /* Your styling if element is clicked */
    }

或者你喜欢的任何风格的反应，有这么多。

如果您想更改所有 Card 元素，onClick 您可能必须将卡片的数据集保存在其父组件中的某个状态（其中 .map(...) 用于添加元素）并添加该数据的属性，例如“isClicked”。然后定义一个函数，该函数采用索引并将该函数添加到 Card 的 props 中，例如 () 并通过将其添加到 Card 中来调用 Card 中的该函数。然后在 :

中使用它

<div onClick={() => props.onChildClickChangeDataState(props.index)} />

这将触发父级中的函数，您可以在其中迭代数据集并将 isClicked 属性更改为您喜欢的值。要更改样式，您可以使用

<p className={props.item.isClicked ? 'titleTransition' : '' />

这种方法可以帮助您一次更改所有内容，并避免提到的无效 HTML @CertainPerformance。我希望我猜对了，它可以帮助您走上正确的道路。目前很难为您提供更多帮助。也许你可以分享你的卡片父组件、卡片、你的 CSS 文件的代码，以及为什么你想一次更改所有 id。那么有人可能会更好地帮助你。

【讨论】：