在ReactJS中使用npm uuid

Question

我有一个需要使用npm uuid包来生成唯一ID的地方。安装uuid包后，使用方法如下：

const uuid = require('uuid/v1');
uuid();

但我遇到了一个错误，错误信息是：

[eslint] Unexpected require(). (global-require)

我的函数如下：

someFunction = (i, event) => {
   if(someCondition) {
       //generate some unique id
       const uuid1 = require('uuid/v1');
       uuid1();
       //call some function and pass this id
       someFunction2(uuid1);
    } else{ 
      //generate some unique id
       const uuid2 = require('uuid/v1');
       uuid2();
       //call some function and pass this id
       someFunction2(uuid2);
    }

在 ReactJs 中使用 require 的最佳方式是什么？

- Uzair Khan

---

你为什么要使用条件导入呢？同时请记住，如果条件无法静态计算，则两个模块（实际上在两个分支中您有相同的模块，但我假设这是一个打字错误）都将被捆绑。 - Yury Tarabanko

你能举个例子吗？ - Uzair Khan

例子是什么？ :) 是条件导入的例子吗？那么你的代码是完美的。你这样写：if(a){ require('')} else {require('')}。问题是为什么你要这样写代码呢？为什么不能在文件顶部直接写import uuid1 from 'uuid/v1'呢？ - Yury Tarabanko

Answer 1

试试这个：

import React from "react";
import ReactDOM from "react-dom";
import uuid from "uuid";

function App() {
  return (
    <div className="App">
      <h1>{uuid.v4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个可运行的示例：https://codesandbox.io/s/0pr5vz48kv

- You Nguyen

---

另一个提示，当我使用React + TypeScript时，有效的导入语句是：import * as uuid from 'uuid';。 - Thiago Valentim

如何获取设备唯一标识？ 它会给我们一个在刷新页面后会更改的ID！ - Mojtaba Darzi

你可以使用useRef来保存你生成的uuid的引用。 - Ashton Engberg

你可以使用useRef来保存你生成的uuid的引用。 - undefined

Answer 2

截至2020年9月，我通过以下步骤让它正常工作：首先安装类型：

yarn add @types/uuid

然后执行：

import React from "react";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from 'uuid';

function App() {
  return (
    <div className="App">
      <h1>{uuidv4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果这段代码将来不起作用，请参考官方文档中的此部分。

- DevLoverUmar

Answer 3

您不必总是要求该软件包。只需请求一次并在需要时使用它即可。

const uuidv1 = require('uuid/v1');

if (condition) {
    some_id = uuidv1();
    some_function(some_id);

} else {
    other_id = uuidv1();
    other_function(other_id);
}

就是这么简单。

- Aravind

---

我已将我的函数修改为如下形式： functionName = () => { const uuid = require('uuid/v1'); if(){ const uid = uuid(); } }但是这仍然会产生[eslint] Unexpected require() (global-require)的错误。请问如何解决？ - Uzair Khan

进行全局导入，不要在函数内部导入。尝试看看是否可行。 - Aravind

我应该在React中导入uuid，并且只调用uuid.vx()；你的答案帮助我理解了这个概念。谢谢。但是在React中，如果启用了linter，它会引起一些麻烦。 - Uzair Khan

如果您想了解有关在函数内使用require的更多详细信息，请查看https://dev59.com/j2ox5IYBdhLWcg3wjE5i。 - Aravind

Answer 4

如果您想要使用uuid v4，在react中导入它的方式如下：

import uuid from 'uuid/v4'

- Bassem

Answer 5

import React from "react";
import ReactDOM from "react-dom";
import * as uuid from "uuid";

function App() {
  return (
    <div className="App">
      <h1>{uuid.v4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

- Gucal

Answer 6

使用typescript版本4.5.0或更高版本与React一起使用。

1. 运行：npm install --save @types/uuid

2. 在根文件夹中创建目录"@types"，并添加文件"allTypes.d.ts"，在其中添加以下内容：

   declare module "uuid";

3. 在ts.config.json的compilerOptions下添加：

   "typeRoots": ["./node_modules/@types","./@types" ]

4. 重新运行您的应用程序，并在必要时导入
   import { v4 as uuidv4 } from "uuid";

- szachMati

Answer 7

如果您想要显示组件项列表，可以考虑使用以下模式：

import React from 'react'
import {v4 as uuidv4} from 'uuid'

const Project = ({title}) =>{
    return(
        <li>{title}</li>
    )
}
const ProjectList = ({projects}) => {
  return (
    <div>
        <ul>
            {
                projects.map(project => <Project title={project.title} key={uuidv4()}/>)
            }
        </ul>
    </div>
  )
}

export default ProjectList

- Bello Shehu

---

永远不要使用随机值作为键。使用您正在映射的数据的属性，或者作为最后的选择，使用索引。 - Remco Haszing

Answer 8

在 React 中使用 import。

在 Node.js 项目中使用 'require'。

如果你想在普通的 Node.js 项目中使用 import，需要设置 "babel"。

- Ping Woo

Answer 9

你必须前往此文件夹 => 你的驱动器:/你的项目文件夹/node_modules/uuid/dist/v1 并查看你的uuid文件夹 默认情况下，它在顶层文件夹中

import UUID From 'uuid/dist/v1'

- Saeid

Answer 10

使用UUID在JavaScript中生成唯一ID

1. 确保你在根目录下，运行ls命令，如果不确定，请查找package.json文件

2. 运行npm i uuid

3. 要在文件中使用它，需要引入它

const {v4: uuidv4} = require('uuid')

现在是困难的部分，如果您正在使用类似于以下路由：

controller.upload = (req, res) => {
    const id = uuidv4() // each upload will have a uuid thats random add your logic 
}

参考资料

- CoderZZZZZZZ