Reactjs 子级的唯一标识符答案

【问题标题】：Unique identifier for Reactjs childrenReactjs 子级的唯一标识符
【发布时间】：2021-03-12 18:59:49
【问题描述】：

我需要一个 Reactjs 组件的子组件的唯一标识符。这是 JSX 伪代码：

<ParentComponent>
  <htmlElement1 uniqueIdentifier="htmlElement1" />
  <htmlElement2 uniqueIdentifier="htmlElement2" />
  <ReactElement1 uniqueIdentifier="ReactElement1" />
  <ReactElement2 uniqueIdentifier="ReactElement2" />
</ParentComponent>

如果我只有 React 元素，我会使用 key，但我还必须处理 html 元素。

我无法使用id，因为我的应用程序与其他应用程序一起嵌入到页面中，并且可能存在冲突。

我目前正在使用title，但是当用户将鼠标悬停在元素上时会显示标识符，因此它看起来不太好。

你能推荐一个更好的属性/道具吗？

【问题讨论】：

标签： html reactjs attributes jsx

【解决方案1】：

您始终可以使用data-* 属性，例如data-unique-id="1"

【讨论】：

好一个！这是否意味着我需要两个不同的名称，data-unique-id 用于 html 属性，dataUniqueId 用于 React 道具？
如果不是 comeCase，那么您必须像组件内的this.props['data-unique-id'] 一样访问它。如果camelCase喜欢dataUniqueId你可以像普通道具一样使用this.props.dataUniqueId这里详细解答：stackoverflow.com/a/47292918/2333214