2

(React、 React-Router、React-Aria-Modalの最新バージョンを使用しています)

Pinterest や Product Hunt で見られるようなルーティング動作を作成しようとしています。なじみのない人のために説明すると、プレビュー モードでモノのフィード (ピン、製品など) を持つことになります。そのプレビューで名前または「もっと見る」リンクをクリックすると、モノがモーダルで開き、それに応じてルートが変更されます。その URL をコピーして貼り付けるか、ページを更新すると、Thing はページのようにレンダリングされます。

そのため、「View More」Linkコンポーネントで状態 (ビュー = モーダル) を設定し、Thingコンポーネントでモーダルでレンダリングするかどうかを確認します。

したがって、本質的に： 

<App>
  <Feed>
    {things.map((thingId) => <Thing id={thingId} />)}
  </Feed>
</App>

内ではThing、おおよそ次のようになります。 

renderThing() {
  return (
    <div>
      <Name />
      <Link 
        to={"/things/ + this.props.id} 
        state = {{
          view: "Modal"
        }}
      > 
        View More 
      </Link>
    </div>
  );
}

render() {
  if(this.state.view == 'Modal'){
    return (<AriaModal>{renderThing()</AriaModal>);
  } else {
    return renderThing();
  }
}

モーダルが表示されているときにリンクをクリックするとページの背景が消えるという問題が発生しました。これは、リンクをクリックすることによるナビゲーションによるものだと思います。

React-Router には、これを解決するこのような例がありますが、いくつかの問題もあります。それらは基本的に前の子をレベルに保存Appし、要求されたモーダル/ルートに加えてそれをレンダリングするようです-本質的に、パフォーマンスもクリーンでもないフィード全体の再レンダリングを引き起こします。

さらに、「次/前」スタイルの対話が設定される場合、「次/前」をクリックしてルーターの状態が更新されるたびにバックグラウンド全体が読み込まれるように見えますが、これも不要に感じます。

前のページが引き続きバックグラウンドで表示され、ルートも更新されるように、これを設定することについてどのように考えるのが最善かを考えています。

どんな考えでも大歓迎です！

4

1 に答える 1

1

Pinterest のルーティングを示す CodePen を作成しました。React Router の代わりにNavigation ルーターを使用しますが、それを受け入れることを願っています。oldStateが入力されている場合、リストが表示され、モーダル div にレンダリングされることがわかります。oldStateが空の場合、リストは表示されず、コンテナー div にレンダリングされます。ハイパーリンクの 1 つを新しいタブで開いて、これを試すことができます。コードについてご不明な点がございましたら、お気軽にお問い合わせください。

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var Thing = ({thing}) => <h2>{thing}</h2>;

var Things = ({things, stateNavigator}) => (
  <div>
    <ul>
      {things.map(thing => 
        <li key={thing}>
          <NavigationLink
            stateKey="thing"
            navigationData={{thing: thing}}
            stateNavigator={stateNavigator}>
            {thing}
          </NavigationLink>
        </li>
      )}
    </ul>
    <div id="modal"></div>
  </div>
);

var stateNavigator = new StateNavigator([
  {key: 'things', route: ''},
  {key: 'thing', route: 'thing'}
]);

var THINGS = ['one', 'two', 'three', 'four', 'five'];

stateNavigator.states.things.navigated = () => {
  ReactDOM.render(
    <Things things={THINGS} stateNavigator={stateNavigator} />,
    document.getElementById('container')
  );
};

stateNavigator.states.thing.navigated = (data) => {
  var oldState = stateNavigator.stateContext.oldState;
  ReactDOM.render(
    <Thing thing={data.thing} />,
    document.getElementById(oldState ? 'modal' : 'container')
  );
};

stateNavigator.start();
于 2016-07-21T19:03:58.230 に答える