LabEx
ログイン登録

React でメールリンクコンポーネントを作成する

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、React でメールを送信するための形式のリンクを生成する Email Link コンポーネントを作成する方法を学びます。このコンポーネントは mailto: リンク形式を使用し、メールの受信者、メールの件名、およびメール本文のプロップスを受け取ります。また、encodeURIComponent を使用してメールの件名と本文を安全にエンコードする方法も学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 96%です。学習者から 100% の好評価を得ています。

メールリンク

index.html と script.js はすでに仮想マシン（VM）に用意されています。一般的には、script.js と style.css にコードを追加するだけです。

この関数は、クリックするとユーザーのメールクライアントを開き、指定された件名と本文の内容で新しいメールを作成するリンクを作成します。リンクは mailto: プロトコルを使用してフォーマットされます。

この関数を使用するには、受信者のメールアドレスを含む email プロップを指定し、オプションで subject と body プロップを指定して、メールに初期内容を設定します。これらのプロップは、リンク URL に追加される前に encodeURIComponent を使用して安全にエンコードされます。

リンクは、指定された children を内容としてレンダリングされます。

const Mailto = ({ email, subject = "", body = "", children }) => {
  const params =
    subject || body
      ? `?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(
          body
        )}`
      : "";

  return <a href={`mailto:${email}${params}`}>{children}</a>;
};

使用例：

ReactDOM.createRoot(document.getElementById("root")).render(
  <Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
    Mail me!
  </Mailto>
);

右下隅にある「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新すると、Web ページをプレビューできます。

まとめ

おめでとうございます！メールリンクの実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。