Notifierイベントの使用

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

次のReactの例は、notifierイベントの使用方法を示しています。

import ReactDOM from "react-dom";
import React from "react";

interface Context {
  api: {
    notifier: {
      notifySuccess: (message: string) => void;
      notifyError: (message: string) => void;
      notifyWarning: (message: string) => void;
      notifyInfo: (message: string) => void;
    };
  };
}

export default function createExternalRoot(container: HTMLElement) {
  return {
    render(context: Context) {
      const { notifySuccess, notifyError, notifyInfo, notifyWarning } =
        context.api.notifier;

      ReactDOM.render(
        <>
          <button
            onClick={() => {
              notifySuccess("Success message");
            }}
          >
            Show success message
          </button>
          <button
            onClick={() => {
              notifyWarning("Warning message");
            }}
          >
            Show warning message
          </button>
          <button
            onClick={() => {
              notifyInfo("Info message");
            }}
          >
            Show info message
          </button>
          <button
            onClick={() => {
              notifyError("Error message");
            }}
          >
            Show error message
          </button>
        </>,
        container
      );
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

この記事を改善するための提案がある場合は、お知らせください!