Как показать LinearProgress в ReactJS?
Линейный индикатор выполнения показывает степень прогресса любой задачи или действия Линейно. Это графическое представление линейной прогрессии. В Material UI для React этот компонент доступен нам, и его легко интегрировать. Мы можем создать LinearProgress Bar в ReactJS, используя следующий подход.
Создание приложения React и установка модуля:
Шаг 1. Создайте приложение React, используя следующую команду.
npx создать-реагировать-приложение имя папки
Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды.
cd имя папки
Шаг 3. После создания приложения ReactJS установите модули material-ui с помощью следующей команды.
npm install @ material-ui / core
App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.
Javascript
import React from "react" ;import LinearProgress from "@material-ui/core/LinearProgress" ; export function default App() { const [countOfProgess, setCountOfProgess] = React.useState(0); React.useEffect(() => { const timer = setInterval(() => { setCountOfProgess((oldProgress) => { if (100 == oldProgress) return 0; return Math.min(oldProgress + Math.random() * 10, 100); }); }, 499); return () => { clearInterval(timer); }; }, []); return ( <div> <h4>How to show LinearProgress in ReactJS?</h4> <LinearProgress variant= "determinate" value={countOfProgess} /> </div> );} |
Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий результат.
