在 reactjs 中使用 npm uuid

Posted 2023-02-19

【中文标题】在 reactjs 中使用 npm uuid

【英文标题】：Use npm uuid in reactjs

【发布时间】：2019-03-21 23:08:20

【问题描述】：

我有一个地方需要使用 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 的最佳方式是什么。

【问题讨论】：

为什么要使用条件导入？另请记住，如果条件不可静态计算，则两个模块（实际上您在两个分支中都有相同的模块，但我认为这是一个错字）将被捆绑。

你能举个例子吗？

什么例子？ :) 有条件的进口？那么你的代码是一个完美的。你做if(a) require('') else require('')。问题是你为什么要这样写代码？为什么不能只在文件顶部添加import uuid1 from 'uuid/v1'？

【参考方案1】：

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

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

使用文件“allTypes.d.ts”在根文件夹中创建目录“@types”并添加到那里

declare module "uuid";

在 ts.config.json 下 compilerOptions 添加：

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

重新运行您的应用并在必要时导入import v4 as uuidv4 from "uuid";

【参考方案2】：

你必须去这个文件夹=> 你的驱动器：/你的项目文件夹/node_modules/uuid/dist/v1 并查看您的 uuid 文件夹 默认是在顶层文件夹中

import UUID From 'uuid/dist/v1'

【参考方案3】：

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);

【参考方案4】：

截至 2020 年 9 月，我首先完成了这项工作，将类型安装为

纱线添加@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);

如果以后这段代码不起作用，请参考this section of official docs.

【参考方案5】：

你可以通过不同的方式导入

1----从命令行安装

npm i react-uuid
import uuid from 'react-uuid'

并用于关键变量，如下所示

key=uuid()

2----我一直使用的更好的方法是

首先，安装

npm install uuid

然后导入

import  v1 as uuidv1  from 'uuid';

并使用

uuidv1();

for more details read

【参考方案6】：

对于 React JS：

import  v1 as uuidv1  from 'uuid';
uuidv1(); // ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'

【讨论】：

请更详细地描述解决方案，并提供更多见解，例如解释实际原因，添加工作代码 sn-p 和执行以消除问题的步骤。有关更多详细信息，请访问 *** 的指南。

【参考方案7】：

以防万一您想使用 uuid v4，这就是您可以在 react 中导入它的方式。

import uuid from 'uuid/v4'

【参考方案8】：

在反应中使用import。

在 Nodejs 项目中使用 'require'。

如果你想在普通 nodejs 项目中使用import，需要设置“babel”。

【参考方案9】：

试试这个：

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

【讨论】：

另一个提示，当我使用 react + typescript 时，有效的导入语句是：import * as uuid from 'uuid';

如何获取设备 uniq id ？它给了我们一个在刷新页面后改变的 id !!!

【参考方案10】：

您不必总是要求该软件包。只需要它一次，然后在任何你想要的地方使用它。

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

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

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

就这么简单。

【讨论】：

将我的函数修改为：functionName = () => const uuid = require('uuid/v1'); if() const uid = uuid(); ，它仍然给我 [eslint] 意外的 require()。 （全局要求）。如何解决？

进行全局导入。不在函数内部。试试看是否可行。

我应该在 react 中导入 uuid，然后调用 uuid.vx();你的回答帮助我理解了这个概念。谢谢。但是如果启用了 linter，则在 react 中会引起麻烦。

如果您想了解更多关于在内部函数中使用 require 的详细信息，请查看***.com/questions/9132772/lazy-loading-in-node-js。