反応コンポーネントDOM親をアンマウント/リセットせずに変更

Question

私は反応コンポーネントを持っています。これはサーバーへのクエリを実行し、結果リストを表示することを意図しています。

いくつかの変数に応じてdomのレイアウトを変更したいと思います。私の問題は、レイアウトを変更すると、コンポーネントがリセットされ、クエリがもう一度実行されることです。私はそれをリセットせずにDOM内のこのコンポーネントを移動することができますので、表示された結果はクエリを再実行することなく同じままです。この場合

、Iは（this.mainSNL()がrender()とthis.linkTabs()機能の両方で呼ばれる）は、それが直接又はthis.linkTabs()の一部として表示されている場合、それをリセットせずに同じ成分を返すようにthis.mainSNL()したい：

render() 
{ 
    return (
     <div> 
      {this.userInputElement()} 

      <div className="main_display_area"> 
       { 
        this.state.linkingNote != undefined ? 
         this.linkTabs() 
         : 
         this.mainSNL() 
       } 
      </div> 
     </div> 
    ) 
} 

mainSNL() 
{ 
    return (
     <StreamedNoteList 
      ref={(streamedList) => { this.mainSNLElement = streamedList; } } 
      /* long list of props*/ 
     /> 
    ) 
} 

linkTabs() 
{ 
    if(this.state.linkingNote == undefined) 
     return null; 

    return (
     <div> 
      <ul id='note_display_tabs' className="nav nav-tabs" role="tablist"> 
       <li role="presentation" className="active"> 
        <a href="#search_note_tab" aria-controls="search_note_tab" role="tab" data-toggle="tab">Create Link</a> 
       </li> 
       <li role="presentation" > 
        <a href="#view_links_tab" aria-controls="view_links_tab" role="tab" data-toggle="tab">View Links</a> 
       </li> 
      </ul> 

      <div className="link_tabs tab-content"> 
       <div role="tabpanel" className="tab-pane fade in active" id="search_note_tab">{this.mainSNL()}</div> 
       <div role="tabpanel" className="tab-pane fade" id="view_links_tab">{this.viewLinksSNL()}</div> 
      </div> 
     </div> 
    ) 
} 

Answer 1

コンポーネントのコンストラクタ関数内でコンポーネントの状態を親に保存し、インポートすることで解決しました。

render() 
{ 
    if(this.mainSNLElement != null) 
    { 
     this.savedMainState = this.mainSNLElement.state; 
    } 

    ... 
} 

mainSNL() 
{ 
    return (
     <StreamedNoteList 
      ref={(streamedList) => { this.mainSNLElement = streamedList; } } 
      importState={this.savedMainState} 
      /* long list of props*/ 
     /> 
    ) 
} 

linkTabs() { ... } 

この質問は私にどんな解決策を与えていないが、それは問題を引き起こしていたものにいくつかの洞察力を持っていた： https://discuss.reactjs.org/t/maintaining-state-of-wrapped-re-parented-components/4091

はこれが起こった理由でドキュメントに反応：https://facebook.github.io/react/docs/reconciliation.html