10

私のアプリケーションには、4 つのタブを持つタブ コンポーネントがありました。各タブのコンテンツは、個別のコンポーネントとして設定されました。タブを 4 つの異なるルートに置き換えています。タブを取り除きreact-router、4 つのコンポーネントごとに 1 つずつ、4 つのルートを設定していました。

タブとの間を移動するとき、タブのコンテンツはその状態を維持します。たとえば、ユーザーが 1 つのタブでリストの一番下までスクロールしたとします。ユーザーが別のタブに移動して戻ってきた場合、リストは一番下までスクロールされたままになります。

ルートでこの動作を実現できません。あるルートから別のルートに移動すると、コンポーネントが (再レンダリングされるだけでなく) 再インスタンス化されることに気付きました。

タブのような動作を実現したい。ディープ ステート リダイレクトを提供する Angular 用の UI-Router-Extras というライブラリがあることは知っています。しかし、React の同様のオプションが見つかりません。ルートがアクティブになったときにコンポーネントを再インスタンス化しようreact-routerとしました。react-router-component

React のルートでこの動作を実現するソリューションはありますか?

4

2 に答える 2

1

個人的には、この場合は react-router を捨てて、アクティブなタブのみを表示しながら、表示する現在のタブを含む状態で親コンポーネントを作成することにしました。

これは非常に簡単な例です

    <div
      style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}}
    >
      <ComponentA />
    </div>
    <div
      style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}}
    >
      <ComponentB />
    </div>
于 2016-12-13T16:05:12.040 に答える