React - 別の（子ではない）コンポーネントを再販

Question

私のアプリはサービスによって提供されるすべての本を表示し、特定の本を検索する検索バーを持っています。

私は2つの主要なコンポーネント：NavPanelとMainPanelを持っています。 NavPanelには子コンポーネントSearchBarがあり、MainPanelには子コンポーネントBooksがあります。彼らは直接関連していません。

Booksはすべての書籍を表示し、SearchBarは特定の書籍を検索します。

私はサービスがブックの配列を提供BooksService呼ばれている、ともいくつかの方法：あなたがページをロードすると

export default function BooksService() { 
    return { 
     reset: function() { 
      // resets the array 
     } 
     getBooks: function() { 
      return books; // array 
     }, 
     filterBooks: function(filter) { 
      books = books.filter(book => book.author.toLowerCase().includes(filter.toLowerCase()) || book.title.toLowerCase().includes(filter.toLowerCase())); 
     } 
    } 
} 

Booksコンポーネントがすべての書籍を取得するためにBooksService().getBooks()を呼び出します。 SearchBarコンポーネントで書籍を検索すると、配列を変更するBooksService().filterBooks(filter)が呼び出されます。

今度はBooksを再レンダリングしてください。 BooksService().getBooks()がトリガーされ、変更された配列が取得されます。どうやってやるの？他の一つの成分に影響を与えるために

Answer 1

、あなたは小道具を使用して、ここであなたが小道具としてブックコンポーネントに

1. パスブックを試すことができるものである必要があります。
2. 誰かが検索して本のデータを更新すると、書籍のデータが更新されると書籍のコンポーネントがレンダリングされます。あなたはReduxのを使用している場合

、その

そうでない場合はトップコンテナ州の書籍データを保存して、トップコンテナの状態を更新するためのコンポーネントを検索する機能を渡し、小道具にアクセスして、小道具のデータを変更するのは非常に簡単検索された本。 そして、あなたがコンポーネント上で（例えば、ref="books"用）REFを使用してこれを行うコンポーネントに小道具を渡したくない場合は小道具

Answer 2

としてブックコンポーネントに同じ状態を渡す：

this.refs.books.forceUpdate(); 

をとにかく私はこのためにreduxを使用することをお勧めします。あなたの書籍を還元剤の減量剤に入れたままにしておき、アプリ内のどこからでも書籍を更新できます。