Методы тостера сообщений React Suite
React Suite — это популярная интерфейсная библиотека с набором компонентов React, разработанных для промежуточной платформы и серверных продуктов. Компонент сообщения позволяет пользователю показывать важные советы на странице. Сообщение с тостером создает тип сообщения, который содержит предупреждение. Существуют различные методы тостера для управления этими сообщениями на вашей веб-странице.
Методы тостера сообщений React Suite:
- toaster.push(): этот метод используется для отправки сообщения.
- toaster.remove(): этот метод используется для удаления сообщения по ключу.
- toaster.clear(): этот метод используется для очистки всех сообщений.
Подход: давайте создадим проект React и установим модуль React Suite. Затем мы создадим пользовательский интерфейс, который продемонстрирует методы тостера сообщений React Suite.
Создание проекта React:
Шаг 1: Чтобы создать приложение для реагирования, вам необходимо установить модули реагирования с помощью команды npx. «npx» используется вместо «npm», потому что вам понадобится эта команда в жизненном цикле вашего приложения только один раз.
npx create-react-app project_name
Шаг 2: После создания проекта реакции перейдите в папку для выполнения различных операций.
cd project_name
Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:
npm install rsuite
Структура проекта: после выполнения команд, упомянутых в предыдущих шагах, если вы откроете проект в редакторе, вы увидите аналогичную структуру проекта, как показано ниже. Пользователь делает новый компонент или изменяет код, который мы будем выполнять в исходной папке.
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Пример 1: мы создаем пользовательский интерфейс, который показывает метод toaster.push() сообщения React Suite.
App.js
import React from "react"import "../node_modules/rsuite/dist/rsuite.min.css";import { Message, Button } from "rsuite";import { useToaster } from "rsuite/toaster"; export default function App() { const toaster = useToaster(); return ( <div style={{ margin: 100 }}> <h3 style={{ color: "green" }}> GeeksforGeeks </h3> <h3>React Suite Message toaster Methods</h3> <br /><br /> <Button onClick={() => toaster.push( <Message showIcon type="success"> Hi ! Welcome to GeeksforGeeks. </Message>, { placement: "topStart" })}> Click Here ! </Button> </div> );} |
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/, вы увидите следующий вывод:
Пример 2: мы создаем пользовательский интерфейс, который показывает методы toaster.push() и toaster.clear() сообщения React Suite Message.
App.js
import React from "react"import "../node_modules/rsuite/dist/rsuite.min.css";import { Message, Button } from "rsuite";import { useToaster } from "rsuite/toaster"; export default function App() { const toaster = useToaster(); return ( <div style={{ margin: 100 }}> <h3 style={{ color: "green" }}> GeeksforGeeks </h3> <h3>React Suite Message toaster Methods</h3> <br /><br /> <Button onClick={() => toaster.push( <Message showIcon > Hi ! Welcome to GeeksforGeeks. </Message>, { placement: "topStart" })}> Click Here ! </Button><br /><br /> <Button onClick={() => toaster.clear()}> Click to Clear ! </Button> </div> );} |
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/, вы увидите следующий вывод:
Ссылка: https://rsuitejs.com/components/message/#use-toaster