React-Toastify コンポーネントは再利用可能です

Question

再利用可能な Toast コンポーネントを作成しようとしています。

コードは次のとおりです: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680

Toast コンポーネント自体をレンダリングするとき [以下のコメント] では、トーストが美しくポップアップ表示されます。

リーリー

ただし、パブリック toastMeta を使用してトーストへの呼び出しを実装しようとしています。この方法では、発信者は toastMeta.message("please show up..") と入力するだけでトーストを取得できます。オプションのパラメータの水平位置と垂直位置も渡されます。

問題: toastMeta.message("") を使用してトースト コンポーネントを呼び出すことができません

注: この CustomToast は npm パッケージになるため、呼び出し元はこのライブラリをインストールし、toastMeta をインポートする必要があります。

リーリー

キーストロークごとにトーストを呼び出す..

リーリー

Toast コンポーネントを作成する理由:

はパブリック ライブラリのコンポーネントの 1 つであるため、バージョン管理に使用されます。共通ライブラリには、すべての UI 要素が含まれています。

＃＃＃助けてくれてありがとう。よろしくお願いします。

Answer 1

オブジェクトを関数として呼び出すことはできません。これが実装が正しくない理由の 1 つです。トーストの ref を使用して、値を動的に渡す必要があります。

コードを確認してください。お役に立てれば幸いです。

App.js

リーリー

トースト.js

リーリー