如何在 ReactJS 中创建一个唯一的 id？

在本文中，我们将看到在 React JS 中创建唯一引用 ID 的简单步骤。这有很多用途，例如给用户上传的图像一个唯一的名称以保存在数据库中。

方法：我们将在本教程中使用Uuid V4 。 Uuid v4 是一个创建通用唯一标识符 (UUID) 的 React 库或包。它是一个 128 位的唯一标识符生成器。组成 UUID v4 的位是随机生成的，没有固有逻辑。正因为如此，没有办法通过查看 UUID 来识别有关源的信息，因此它非常独特。

下面是分步实现：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：创建后，您的项目目录应如下所示。

项目目录

第 3 步：从 src 文件夹中删除除 index.js 和 app.js 之外的所有文件（非必需但推荐）。接下来，使用以下命令安装 UUID v4：

npm install uuidv4

第 4 步：将包导入您的组件、页面或代码等。您现在可以使用以下代码将唯一 ID 分配给任何变量。 unique_id是这里的一个例子，它可以是任何变量名。我们将唯一的 id 存储在其中。然后，您可以使用 console.log() 来查看输出并在需要的地方使用它。在这里，我将它显示在

标记中。

如果唯一 id 太长，可以切片或提取一小部分使用。我们可以在这里使用 JavaScript slice()函数。它有 2 个参数，字符数和最后一个字符。变量small_id将存储这个切片 id。我们将在浏览器上输出这两个 id 以查看差异。

App.js

//import uuid v4
import { v4 as uuid } from 'uuid';
  
export default function App() {
  const unique_id = uuid();
  const small_id = unique_id.slice(0,8)
  return (
    

      
Unique ID
      
{unique_id}
      
Sliced Unique ID
      
{small_id}
    
  );
}

运行应用程序的步骤：要运行应用程序，请使用以下命令：

npm start

输出：现在，如果您运行应用程序，唯一 ID 将显示在标题下方。每次刷新时，都会显示一个新的且唯一的id，不会重复。

输出