React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

父から息子へ

propsを通じて値を渡し、useStateを使用して状態値を制御する

親コンポーネント Father.tsx 内:

親コンポーネント

子コンポーネント Child.tsx 内:

サブコンポーネント

表示効果:

表示効果

息子から父へ

react と同様に、コールバック関数が子コンポーネントに渡され、子コンポーネントの戻り値を受け取ることで親コンポーネントの状態が更新されます。

Father.tsx 内の親コンポーネント:

親コンポーネント

Child.tsx 内の子コンポーネント:

サブコンポーネント

表示効果:

表示効果

イベントを処理する関数を保存するために useCallback を使用する、子から親への転送の最適化バージョン

Father.tsx 内の親コンポーネント:

親コンポーネント

Child.tsx 内の子コンポーネント:

サブコンポーネント

クロスレベルコンポーネント(親から子孫)

ReactのContextと同様に、useContextを使用して値を渡す

手順:

コンテキストを作成し、context.providerを使用して、コンテキストを導入するために値を渡す必要があるコンポーネントを関連付け、useContextを使用して値を取得します。

Father.tsx 内の親コンポーネント:

親コンポーネント

Child.tsx 内の子コンポーネント:

サブコンポーネント

Sun.tsx 内の孫コンポーネント:

孫コンポーネント

表示効果

表示効果

これで、React Hooks コンポーネント間で値を渡す方法 (ts を使用) に関するこの記事は終了です。React Hooks コンポーネント間で値を渡す方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ReactHooks バッチ更新状態とルートパラメータの取得例の分析
  • React Hooksの詳細な説明
  • React Hooksを使用する際のよくある落とし穴
  • 30分でReact Hooksを包括的に理解できます
  • Reactフックの仕組み
  • Reactにおけるフックの一般的な使用法
  • React の 10 個のフックの紹介

<<:  postcss-pxtorem モバイル適応の実装

>>:  html+cssレイアウトの3つの方法(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)

推薦する

MySQL で誤って削除したテーブル データを回復する方法 (必読)

バックアップがあれば、非常に簡単です。最新のバックアップ データを生成し、mysqlbinlog を...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

Dockerコンテナのデータボリュームの詳細な説明

何ですかまず、Docker の概念を見てみましょう。アプリケーションと実行環境をコンテナにパッケージ...

Linux システムで .sh ファイルを実行する方法

Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?

IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

MySQL データベースの集計クエリと結合クエリ操作

目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...