反応の基礎:コンポーネント間のデータの通過

反応のコンポーネント間のデータを渡すことは非常に強力な概念です.
この記事では、次の2つを見ます.

親から子へデータを送る

子から親へデータを送る

この概念のために、我々はuseState フック.あなたは今までフックを見ていない.別の時に詳しく書きます.
今日の結果は次のようになります.


親プロセスから子要素へのデータの送信
反応の中で最も楽なデータフローは、親コンポーネントから子コンポーネントにデータトップダウンを渡すことです.
現在の例を出発点としましょう.
Download the GitHub repo
このレポでは、いくつかの本でそれを簡単な本棚を構築します.
最後の例では、我々は本をループしたが、我々はオブジェクトとしてこれらの本を渡したい.
このようなparamsを設定することで、本棚に渡すことができます.

<Bookshelf books={books}></Bookshelf>

次に必要なのは本棚コードを変更して次のように表示します.

import Book from './Book';

export default function Bookshelf({ books }) {
  return (
    <div>
      {books.map((book) => (
        <Book title={book.title} key={book.id} />
      ))}
    </div>
  );
}

これは私たちのデータを少し分離し、我々は現在、書籍の独自のセットを複数の本棚を作成することができます.
このことについてのクールな部分は、特定のアクションでも行うことができることです.
お返ししましょうApp.js あなたが私がそれによって意味するものを示すために、新しい状態を設定してください.

const [books, setBooks] = useState([]);

Note we named this books as well, so rename the top data set as booksData

今、我々はボタンを追加することができますonClick 私たちの本を読み込みます.

<button onClick={() => setBooks(booksData)}>Load the books</button>

そして、あなたが今行く私たちの本は、ボタンをクリックするときにのみ読み込まれます.

子プロセスから親コンポーネントへのデータの送信
親コンポーネントからデータを送ることができるようになりました.
私たちが達成したいのは、どの本がクリックされたかを知るオプションがあるということです.
しかしながら、このアプローチのために、親コンポーネントはこのデータを受け取る方法を持たなければなりません.
開けましょうBookshelf.js このようにコードは、実際の書籍の親として動作します.
現在の本を追跡するために新しい状態を追加します.

const [currentBook, setCurrentBook] = useState('');

それから、それがセットされるならば、我々は現在の本を示すことができます:

{currentBook && <h1>Currently reading: {currentBook}</h1>}

そして最後にやりたいことは、set関数をこのようなブックコンポーネントに渡します.

<Book
  setCurrentBook={setCurrentBook}
  title={book.title}
  key={book.id}
/>

ブックコンポーネント内では、この関数をパラメーターとして受け入れる必要があります.
そして、我々はonClick この関数を呼び出して、タイトルを返します.

export default function Book({ title, setCurrentBook }) {
  return <div onClick={() => setCurrentBook(title)}>{title}</div>;
}

そこに行く.データを2つの方法でバインドすることができます.
親から子へ、そして他の道から.
あなたは完全なコードを見つけることができますGitHub .

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or