おそらく、親コンポーネントから子コンポーネントに props を渡していると思います。「うーん...でも、子コンポーネントから親コンポーネントに props を渡したい場合はどうすればよいでしょうか? つまり...その逆です」 ？"、 右？ ?私もそう疑問に思いましたが、実は解決策があります。

それらを見ていきます。

小道具の典型的な流れは何ですか?

プロップの一般的な流れは親から子です。基本的に、次のような親コンポーネントがあるとします:

以下の子コンポーネントは、非常に人気のある shadcn/ui コンポーネント ライブラリの Button コンポーネントを使用しています。 Button コンポーネントには、親コンポーネントから渡される子プロパティがあります。

上記では、子プロパティを親コンポーネントから子コンポーネントに渡しています。ここまでは順調ですよね?

子から親にプロップを渡したい場合はどうすればよいでしょうか?

さて、特にこのようなロジックを初めて実装する場合は、ここからが少し難しくなります。おそらく難しいのは、それをどのように実行するかということではなく、それをどのように視覚化するかということです。いずれにせよ、私はそこに行ったことがあります。私の経験があなたのお役に立てば幸いです ?

学習は実際にやってみるのが一番なので、先ほどの例を少し変更して、子から親に props を渡す方法を見てみましょう。この例の目的は、子コンポーネントからデータを渡すことによって、親コンポーネントの状態を変更する方法を示すことです。

子コンポーネントから行うことは次のとおりです:

文章でわかりやすくするために、2 つのコンポーネントで達成しようとしていることは、親コンポーネントで状態を初期化し、変数を子コンポーネントに渡し、それぞれの関数を更新することです。親コンポーネントの状態の値。この場合、状態の値が最初に false に設定されているとします。子コンポーネントのボタンをクリックすると、その値が取得され、クリック イベントで関数が呼び出されたときに、その値が false の反対に変更されます (値の! は値を否定します)。

子から親にデータを渡すときによくある落とし穴

子コンポーネントから親へのデータの受け渡しには特有の性質があります。最も一般的な落とし穴の 1 つは、コールバック関数を prop として子コンポーネントに渡すのを忘れることです。これは、渡す必要があるロジックをさらに渡すことになることも意味します。これにより、さらに面倒なバグが発生し、デバッグが困難になる可能性があります。

これを防ぐ 1 つの方法は、useCallback フックを使用することです。これにより、子コンポーネントにコールバックとして渡す関数がレンダリング間で安定した状態を保ち、不必要な再レンダリングが防止され、パフォーマンスが向上します。 useCallback で何が起こるかというと、関数を prop として子コンポーネントに渡すと、子コンポーネントはその関数にアクセスできるようになり、必要に応じてその関数を呼び出すことができるようになります。これをどのように行うかを見てみましょう。

次に、子コンポーネントでどのように見えるかを見てみましょう:

これは、関数を渡して、それを子から更新して、再度親に渡すよりもすっきりしませんか?よりクリーンで実装も簡単ですよね? ?

読んでいただきありがとうございます！

React で子から親にデータを渡す方法は確かに他にもあり、さらにクリーンで見栄えの良い方法がある可能性もありますが、私の記事を読んだ後、データがどのように受け渡されるかの流れを理解しやすくなることを願っています。子から親へ、そして 2 つの異なる方法でそれを実装する方法について説明します。もしかしたら、もっとクリエイティブな方法を自分で見つけられるかも知れません? ?もしそうなら、あなたのアイデアをコメントで説明していただければ幸いです。

著者について

私はポルトガルに拠点を置くソフトウェア開発者およびテクニカル ライターです。私はソフトウェア エンジニアリングに情熱を持っています ?‍?私は日常的に新しいツールを探索し、一般的なビジネス上や技術的な問題に対する興味深く創造的な解決策を見つけるのが大好きです。 GitHub で私を見つけることができます。ご質問やご意見がございましたら、お気軽にお問い合わせください。 ?