如何唯一标识页面上呈现的组件?

1-使用二手挂钩 React提供了useId钩子来生成唯一的ID。这些ID在服务器和客户端之间是一致的,并且保证在React树中是唯一的。

import React, { useId } from 'react';

const GridComponent = ({ gridName }) => {
   const uniqueId = useId();
   const storageKey = gridName || `grid-${uniqueId}`;

   // Save to localStorage
   console.log(storageKey); // Example: "grid-r:0"

   return <div>Your Grid</div>;
};

2-使用组件位置和随机ID 您可以使用组件在React树中的位置生成一个唯一的键。例如,将window.location.pathname和Math.random()值组合在一起:

const GridComponent = ({ gridName }) => {
const uniqueId = gridName || `grid-${window.location.pathname}-${Math.random().toString(36).substr(2, 9)}`;

   // Save to localStorage
   console.log(uniqueId);

   return <div>Your Grid</div>;
};

这确保了不同页面上的网格不会冲突。

3-使用React.createRef 如果网格是同一父网格的一部分,则可以使用React.createRef分配唯一标识符

4-使用索引和父组件名称 如果网格是重复多个网格的父组件的一部分,则可以使用索引或父名称使其唯一

const ParentComponent = () => {
const grids = [/* grid data */];

return grids.map((grid, index) => (
    <GridComponent key={index} gridName={`parent-grid-${index}`} />
));
};

建议 useId挂钩是React最原生和最一致的解决方案。然而,若您需要跨页面的唯一性或出于调试目的,将window.location.pathname和随机值或网格道具的哈希值组合起来效果很好。