カスタマイズ可能な React ツールチップの作成

ReactReactBeginner
今すぐ練習

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

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、React で状態とイベントハンドラを使用してツールチップコンポーネントを作成する方法を学びます。ツールチップは、ユーザーが要素の上にマウスを乗せると表示され、追加情報を提供する小さなポップアップボックスです。この実験が終了すると、React アプリケーションに簡単に統合できるカスタマイズ可能なツールチップを作成できるようになります。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/FundamentalsGroup -.-> react/conditional_render("Conditional Rendering") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38367{{"カスタマイズ可能な React ツールチップの作成"}} react/event_handling -.-> lab-38367{{"カスタマイズ可能な React ツールチップの作成"}} react/conditional_render -.-> lab-38367{{"カスタマイズ可能な React ツールチップの作成"}} react/hooks -.-> lab-38367{{"カスタマイズ可能な React ツールチップの作成"}} react/use_state_reducer -.-> lab-38367{{"カスタマイズ可能な React ツールチップの作成"}} end

ツールチップ

VM には既に index.htmlscript.js が用意されています。一般的には、script.jsstyle.css にのみコードを追加すればよいです。

以下は、もっと明確で簡潔で整合性のあるバージョンのコンテンツです。


このコードはツールチップコンポーネントを作成します。これを使用するには、以下の手順を実行します。

  1. useState() フックを使用して show 変数を作成し、false に設定します。
  2. ツールチップ要素とコンポーネントに渡された children を含むコンテナ要素をレンダリングします。
  3. show 変数によって制御されるツールチップの className を切り替えることで、onMouseEnteronMouseLeave イベントを処理します。

以下はツールチップコンポーネントのコードです。

.tooltip-container {
  position: relative;
}

.tooltip-box {
  position: absolute;
  top: calc(100% + 5px);
  display: none;
  padding: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.tooltip-box.visible {
  display: block;
}

.tooltip-arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}
const Tooltip = ({ children, text, ...rest }) => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="tooltip-container">
      <div className={show ? "tooltip-box visible" : "tooltip-box"}>
        {text}
        <span className="tooltip-arrow" />
      </div>
      <div
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
        {...rest}
      >
        {children}
      </div>
    </div>
  );
};

ツールチップコンポーネントを使用するには、以下のコードで ReactDOM.createRoot() を呼び出します。

ReactDOM.createRoot(document.getElementById("root")).render(
  <Tooltip text="Simple tooltip">
    <button>Hover me!</button>
  </Tooltip>
);

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

まとめ

おめでとうございます!あなたはツールチップの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習してください。