콘텐츠

PrimeREACT는 무엇입니까?

PrimeREACT is an open-source UI Library for REACT with native components created by PrimeTek. The support is provided by the company as well as for the community users.

The Prime library is also available for JSF, Angular and Vue.

요구 사항

For this example I am using:

Node v12.18.2
Npm v6.14.5
PrimeReact 5.0.0

토스트 구성 요소

The Toast component is used to display messages in an overlay and has the capacity to customize the messages easily using its properties, this component was added in the version 5.0.0 of PrimeREACT (aka Growl in previous versions).

토스트 구성 요소는 세 가지 주요 특성으로 구성됩니다(더 있음).

심각성

메시지의 심각도에는 네 가지 가능한 값이 있습니다.

성공
정보
경고하다
오류

요약

메시지의 요약 내용입니다.

세부 사항

메시지의 세부 내용입니다.

시작하는 방법

You can create a new REACT project or use any project you are working at.

Once we have our project ready, we need to install the PrimeReact module available at npm using the following command:

npm install primereact --save

as well the modules react-transition-group package for animations, classnames package to manage style classes and primeicons.

npm install react-transition-group
npm install classnames
npm install primeicons --save

구현

For this example, I will be using the App.js file which is created by default. The boilerplate code looks like this (NOTE: This is a function component.):

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Toast Example</h1>      
    </div>
  );
}

export default App;

Let's start to code!

1 We need to import the Toast component in our file, and the styles if we want to use the Prime themes.
NOTE: You can use your own css file.

import { Toast } from 'primereact/toast';
import 'primereact/resources/themes/saga-green/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

2 Inside the app component create a ref using the hook useRef null 값으로 초기화

const myToast = useRef(null);

React에서 ref 후크 가져오기를 추가하는 것을 잊지 마십시오. 이제 React에서 가져온 항목은 다음과 같습니다.

import React, {useRef} from 'react';

3 Toast 구성 요소의 일부인 심각도, 요약 및 세부 정보에 해당하는 세 가지 매개 변수를 사용하여 showToast 함수 호출을 생성해 보겠습니다. 이러한 매개 변수는 토스트 내용을 동적으로 만드는 데 도움이 됩니다.

  const showToast = (severityValue, summaryValue, detailValue) => {   
    myToast.current.show({severity: severityValue, summary: summaryValue, detail: detailValue});   
  }

4 그런 다음 이전에 만든 ref를 사용하여 App 구성 요소의 반환 블록에 토스트 구성 요소를 추가합니다.

<Toast ref={myToast} />

5 마지막으로 세 개의 매개변수를 전달하는 showToast 함수를 트리거하는 버튼을 만듭니다. 다른 요소를 사용하여 함수를 호출할 수 있습니다.

<button onClick={() => showToast('success','Success Message','The task was executed successfully.')}>Show message</button>

버튼을 클릭하면 최종 결과는 다음 이미지와 같습니다.

전체 코드는 다음과 같습니다.

import React, {useRef} from 'react';
import './App.css';
import { Toast } from 'primereact/toast';
import 'primereact/resources/themes/saga-green/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

function App() {

  const myToast = useRef(null);

  const showToast = (severityValue, summaryValue, detailValue) => {   
    myToast.current.show({severity: severityValue, summary: summaryValue, detail: detailValue});   
  }

  return (
    <div className="App">
      <h1>Toast Example</h1>    
      <Toast ref={myToast} /> 
      <button onClick={() => showToast('success','Success Message','The task was executed successfully.')}>Show message</button>
    </div>
  );
}

export default App;

또는 GitHub에서 프로젝트를 복제할 수 있습니다https://github.com/ZhectorSM/toast-article.git.

마무리 생각

This is the first public article I have written in life, hoping to be helpful and enjoyable. If you find any problems with the example provided feel free to reach out to me.
Thank you for reading.

참조

PrimeREACT Website
Toast component documentation
REACT refs

Reference

이 문제에 관하여(PrimeREACT와 함께 토스트 구성 요소를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zhectorsm/how-to-use-toast-component-with-primereact-34e8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

PrimeREACT와 함께 토스트 구성 요소를 사용하는 방법

콘텐츠