ReactJSでタブを作成するにはどうすればよいですか?

ReactJS は、ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリです。 Web 開発にコンポーネントベースのアプローチを提供し、インタラクティブで動的な UI 要素を簡単に作成できるようにします。タブは、コンテンツをユーザーフレンドリーな方法で整理して表示するために使用される一般的な UI パターンです。この記事では、ReactJS でタブ コンポーネントを作成する方法を説明します。

前提条件

この記事を読む前に、ReactJS とその中心となる概念についての基本を理解しておく必要があります。 Node.js と npm (ノード パッケージ マネージャー) がコンピューターにインストールされていることを確認します。

新しい React プロジェクトをセットアップする

まず、Create React App を使用して新しい React プロジェクトを作成しましょう。このツールは、基本的なプロジェクト構造を持つ新しい React プロジェクトの作成に役立つツールです。ターミナルを開き、次のコマンドを実行します:

リーリー

方法 1: UseRef フックを使用する

useRef フックは、コンポーネント内の要素への変更可能な参照を作成できるようにする組み込みの React フックです。これを使用して、タブ コンポーネントのアクティブなタブの状態を管理できます。

＃＃＃例＃＃＃

以下のコードでは、まず必要な依存関係をインポートし、機能コンポーネント タブを設定します。コンポーネント内で、tabsRef という useRef フックを作成し、タブ オブジェクトの配列を保存します。これにより、タブとそのプロパティを参照できるようになります。また、useState フックを使用して、activeTab という状態変数を作成し、現在アクティブなタブを追跡します。 handleTabClick 関数は、タブがクリックされたときに activeTab 状態を更新する役割を果たします。 renderTabs 関数は tabsRef.current 配列を反復処理し、タブ タイトルをレンダリングします。現在アクティブなタブに「Activity」クラスを追加します。最後に、タブとアクティブなタブのコンテンツの JSX マークアップを返します。

リーリー ＃＃＃出力＃＃＃

方法 2: useReducer フックを使用する

useReducer フックは、複雑な状態ロジックをより組織化された方法で管理する方法を提供する別の組み込み React フックです。このフックを利用して、タブの状態変更を処理できます。

＃＃＃例＃＃＃

以下のコードでは、状態オブジェクトを空の「tabs」配列で初期化し、「activeTab」プロパティを 0 に設定します。状態オブジェクトを適切に初期化することで、「state.tabs」配列が未定義でないことが保証され、配列をマッピングしてタブ オブジェクトとそのプロパティにアクセスできるようになります。

"tab-content" div で使用される "?.content" 構文により、現在のタブ オブジェクトが定義されている場合にのみ content プロパティにアクセスできるようになります。これにより、タブを切り替えるときのエラーを防ぎます。

特定のデザイン要件に基づいて、タブのタイトルとコンテンツの表示をカスタマイズできます。

リーリー ＃＃＃出力＃＃＃

方法 3: 状態とプロパティを使用する

3 番目の方法では、コンポーネントの状態とプロパティを使用してアクティブなタブを管理します。この方法は、タブ ロジックがそれほど複雑ではない単純な場合に適しています。

＃＃＃例＃＃＃

以下のコードでは、タブ コンポーネントに「tabs」配列を定義して、タブのタイトルとコンテンツに必要なデータを提供します。コンポーネント内で「tabs」配列を定義することで、コンポーネントのスコープ内で配列にアクセスできるようになります。 useState フックはアクティブなタブの状態を管理するために使用され、初期値は 0 に設定されます。 handleTabClick 関数は、タブがクリックされるとアクティブなタブを更新します。 renderTabs 関数は、「tabs」配列をマップし、タブ タイトルをレンダリングします。 「active」クラスは、activeTab の状態に基づいてアクティブなタブに適用されます。

タブ コンテンツ div には、現在アクティブなタブのコンテンツが表示されます。

リーリー ＃＃＃出力＃＃＃

＃＃＃結論は＃＃＃

この記事では、Reactjs でタブを作成する方法について説明しました。 useRef フックは可変参照の管理に便利で、useReducer フックは状態管理に対するより構造化されたアプローチを提供し、state メソッドと props メソッドはより単純なタブの実装に適していることを紹介しました。これらのテクニックを理解することで、React アプリケーションでインタラクティブで使いやすいタブ コンポーネントを作成できます。

以上がReactJSでタブを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。