Используйте npm uuid в реактивах

Question

У меня есть место, где я должен использовать пакет npm uuid для генерации уникальных идентификаторов. После установки пакета 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.

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

Answer 2

По состоянию на сентябрь 2020 года я получил это сначала, установив типы как

пряжа добавить @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);

Если этот код не будет работать в будущем, обратитесь к этому разделу официальных документов.

Answer 3

Вам не нужно требовать пакет всегда. Просто потребуйте это только один раз и используйте его где угодно.

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

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

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

Это так просто.

Answer 4

На всякий случай, если вы хотите использовать uuid v4, вы можете импортировать его в React.

import uuid from 'uuid/v4'

Answer 5

Использование React с машинописным текстом версии 4.5.0 или выше.

1. Бежать: npm install --save @types/uuid

2. Создайте каталог "@types" в корневой папке с файлом "allTypes.d.ts" и добавьте туда

   declare module "uuid";

3. В ts.config.json в разделеcompileOptions добавьте:

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

4. Перезапустите приложение и импортируйте его при необходимости.
   import { v4 as uuidv4 } from "uuid";

Answer 6

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

Answer 7

Для React JS:

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

Answer 8

Если то, что вы пытаетесь сделать, это отобразить список элементов компонентов, вы можете рассмотреть этот шаблон:

      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

Answer 9

Вы можете импортировать разными способами

1---- Из командной строки Установка

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

и используйте для ключевой переменной, как показано ниже

key={uuid()}

2---- Я всегда использую лучший способ

сначала установите

npm install uuid

затем импортировать

import { v1 as uuidv1 } from 'uuid';

и использовать

uuidv1();

подробнее читайте

Answer 10

Генерация уникального идентификатора в JavaScript с использованием UUID

1. убедитесь, что вы запускаете ls с правами root, если вы не уверены, что ищете 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 
}

ссылка

Answer 11

вы должны перейти в эту папку => ваш диск: / your projectfolder / node_modules / uuid / dist / v1 и увидеть папку своего uuid по умолчанию, это находится в верхней папке

      import UUID From 'uuid/dist/v1'

Answer 12

В ответ использовать import.

В проекте Nodejs используйте require.

Если вы хотите использовать import в обычном проекте nodejs для установки требуется "babel".