React-Toastify 구성요소는 재사용 가능합니다.

Question

재사용 가능한 Toast 구성 요소를 만들려고 합니다.

코드는 다음과 같습니다: https://codesandbox.io/s/custom-toastify-toast-with-react-comComponent-forked-mu2l9c?file=/src/Toast.js:146-680

Toast 컴포넌트 자체를 렌더링할 때 [아래 설명] 토스트가 아름답게 팝업됩니다.

으아아아

그런데 공익을 이용하여 토스트를 구하려고 합니다toastMeta 来实现对 toast 的调用。这样调用者只需输入 toastMeta.message("please show up.."). 선택적 매개변수인 수평 및 수직 위치도 전달됩니다.

문제: 토스트 구성 요소를 호출하는 데 toastMeta.message("")를 사용할 수 없습니다

참고: 이 CustomToast는 npm 패키지이므로 호출자는 이 라이브러리를 설치하고 가져와야 합니다 toastMeta.

으아아아

키를 누를 때마다 토스트를 호출합니다..

으아아아

Toast 컴포넌트를 만든 이유:

공용 라이브러리의 구성 요소 중 하나이므로 버전 관리에 사용됩니다. 공용 라이브러리에는 모든 UI 요소가 포함되어 있습니다.

도움을 주셔서 정말 감사합니다. 미리 감사드립니다.

Answer 1

객체를 함수로 호출할 수 없습니다. 이는 구현이 잘못된 이유 중 하나입니다. 토스트의 ref를 사용한 다음 값을 동적으로 전달해야 합니다.

코드를 확인하시고 도움이 되셨으면 좋겠습니다!

App.js

으아아아

Toast.js

으아아아