Используйте npm uuid в reactjs
У меня есть место, где мне нужно использовать пакет 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);
}
Как лучше всего использовать require в ReactJs.
Вы можете привести пример?
Пример чего? :) условного импорта? Что ж, ваш код идеален. Вы делаете if (a){ require('')} else {require('')}. Вопрос был в том, почему вы так написали код? Почему вы не можете просто вставить import uuid1 from 'uuid/v1' в начало файла?
Ответы 9
Вам не обязательно требовать пакет всегда. Просто потребуйте его только один раз и используйте, где хотите.
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] Unexpected (). (глобальное требование). как решить это?
Сделайте глобальный импорт. Не внутри функций. Попробуйте, если это сработает.
Я должен был импортировать uuid в react и просто вызвать uuid.vx (); Ваш ответ помог мне понять концепцию. Спасибо. Но в реакции, если линтер включен, это вызывает проблемы.
Загляните в этот stackoverflow.com/questions/9132772/lazy-loading-in-node-js, если вы хотите получить более подробную информацию об использовании внутренних функций require.
Попробуй это:
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';
как получить уникальный идентификатор устройства? он дает нам идентификатор, который меняется после обновления страницы !!!
В качестве реакции используйте import.
В проекте Nodejs используйте require.
Если вы хотите использовать import в обычном проекте nodejs, необходимо настроить «babel».
На всякий случай, если вы хотите использовать uuid v4, вы можете импортировать его в React.
import uuid from 'uuid/v4'
Для React JS:
import { v1 as uuidv1 } from 'uuid';
uuidv1(); // ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'
Пожалуйста, опишите решение более подробно с дополнительными сведениями, такими как объяснение фактической причины, добавление фрагмента рабочего кода и шаги, которые необходимо выполнить для устранения проблем. Дополнительные сведения см. В руководстве StackOverflow.
вы можете импортировать разными способами
1 ---- Из командной строки Установка
npm i react-uuid
import uuid from 'react-uuid'
и используйте для ключевой переменной, как показано ниже
key = {uuid()}
2 ---- Я всегда использую лучший способ
сначала установите
npm install uuid
затем импортировать
import { v1 as uuidv1 } from 'uuid';
и использовать
uuidv1();
Что касается Сентябрь 2020 г., я получил это сначала, установив типы как
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);
Если этот код не будет работать в будущем, обратитесь к этот раздел официальных документов.
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);
вы должны перейти в эту папку => ваш диск: / ваша папка проекта / node_modules / uuid / dist / v1 и посмотрите папку вашего uuid по умолчанию это находится в верхней папке
import UUID From 'uuid/dist/v1'
Почему вы вообще используете условный импорт? Также имейте в виду, что оба модуля (на самом деле у вас один и тот же модуль в обеих ветвях, но я предполагаю, что это была опечатка) будут объединены, если условие не является статически вычислимым.