子コンポーネントの状態を更新しない条件付きレンダリング

Question

状態が子コンポーネントに落ちる条件付きレンダリングに奇妙な問題があります。 PDFビューアコンポーネントとWebビューアコンポーネント（iframeを使用）を持つビューアテンプレートがあります。サーバーから返される内容に応じて、media_typeの値が設定され、適切なコンポーネントがレンダリングされます。それはすべて正常に動作しています。

外部では、コンテンツの内部を検索する兄弟コンポーネントがあります。そのためには、検索クエリを親コンポーネントまで渡してから、親コンポーネントを更新してから、子供を小道具として。この理由は、異なるコンテンツが異なる検索実装を必要とし、これはビューアコンポーネント内で実装されるからです。

明らかに、私の条件付きレンダリングの方法は、子コンポーネントの検索クエリの小道具の更新を破ることです。プロップが変更されたときにコンポーネントの更新メソッドが呼び出されていないため、検索の実行は決して呼び出されません。

兄弟コンポーネントは共通の親でこのメソッドを呼び出します。

/** 
* Search query execution handler. Passes the state as a prop to the catalog for search 
* execution 
* @param e Keyword or query string from SearchPanel 
*/ 
searchQueryHandler(e) { 
    this.setState({ 
     searchRequest: e 
    }); 
} 

親コンポーネントは、方法今

render() { 

    let viewer = <div />; 

    if (this.state.link.media_type === 1) 
     viewer = <PDF file={this.state.link.id} 
         setOverlayVisibility={this.props.setOverlayVisibility} 
         searchQuery = {this.state.searchRequest} 
         searchMatchHandler={this.searchMatchHandler} 
         searchResultSelection={this.state.searchResultSelection} 
     />; 
    else if (this.state.link.media_type !== '') 
     viewer = <WebViewer link={this.state.link} 
           setOverlayVisibility={this.props.setOverlayVisibility} 
           searchQuery={this.state.searchRequest} 

     />; 

    return (
     <Content> 
      <ContentLeft> 
       {viewer} 
      </ContentLeft> 
      <ContentRight> 
       <SidePanel institution={this.state.institution} 
          link={this.state.link} 
          searchQueryHandler={this.searchQueryHandler} 
          searchResults={this.state.searchResults} 
          searchResultClickHandler={this.searchResultClickHandler} 
       /> 
      </ContentRight> 
     </Content> 
    ) 
} 

をレンダリングし、searchQueryHandler方法は、イベントに見舞われているが、SidePanelでオフに解雇が、 componentWillReceiveProps,shouldComponentUpdate,willComponentUpdateのいずれもPDFまたはWebViewerと呼ばれていません。私はこれがrenderの中のif/elseブロックと関係していると考えますが、これを実装する方法は他にありません。

Answer 1

この回答は、検索クエリの新しい状態を考慮していないshouldComponentUpdate実装によって更新がブロックされていたためです。そのため、常にfalseに戻り、適切な子コンポーネントへの状態更新の伝播をブロックしていました。

shouldComponentUpdate(nextProps, nextState) { 
    return this.state.link !== nextProps.link || this.state.searchRequest !== nextState.searchRequest; 
} 

が修正されました。

シンプルでありながら、とてもイライラしています。