当前位置：首页 > React

react如何生成uuid

2026-02-26 07:15:44React

使用 `uuid` 库生成 UUID

安装 uuid 库，这是一个广泛使用的生成 UUID 的工具库。
通过 npm 或 yarn 安装：

npm install uuid

在 React 组件中引入并生成 UUID：

react如何生成uuid

import { v4 as uuidv4 } from 'uuid';

function MyComponent() {
  const uniqueId = uuidv4();
  return <div>Generated UUID: {uniqueId}</div>;
}

使用 `crypto.randomUUID()`

现代浏览器支持 crypto.randomUUID() 方法，无需安装额外库。
在 React 组件中直接调用：

function MyComponent() {
  const uniqueId = crypto.randomUUID();
  return <div>Generated UUID: {uniqueId}</div>;
}

使用 `nanoid` 库生成短 UUID

如果需要更短的唯一 ID，可以使用 nanoid 库。
安装 nanoid：

react如何生成uuid

npm install nanoid

在 React 组件中使用：

import { nanoid } from 'nanoid';

function MyComponent() {
  const uniqueId = nanoid();
  return <div>Generated NanoID: {uniqueId}</div>;
}

自定义 UUID 生成函数

如果需要自定义 UUID 生成逻辑，可以编写一个简单的函数：

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

function MyComponent() {
  const uniqueId = generateUUID();
  return <div>Generated UUID: {uniqueId}</div>;
}