2

（我使用的是最新版本的 React、React-Router和React-Aria-Modal）

我正在尝试创建类似于 Pinterest 或 Product Hunt 上的路由行为。对于那些不熟悉的人来说，它归结为在预览模式下拥有一个事物的提要（图钉、产品等）。单击该预览中的名称或某些“查看更多”链接，以模式打开事物并相应地更改路线。如果我要复制粘贴该 URL，或刷新页面，Thing 现在会像页面一样呈现。

因此，在“查看更多”Link组件上，我设置了状态（视图 = 模态）并在Thing组件中查看是否在模态中呈现。

所以，本质上： 

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

在 aThing中，它大致如下所示： 

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 路由器，但我希望您对此持开放态度。您可以看到，如果oldState已填充，则列表是可见的，并且我呈现到模态 div 中。如果oldState为空，则列表不可见，我会渲染到容器 div 中。您可以通过在新选项卡中打开其中一个超链接来尝试此操作。如果您对代码有任何疑问，请告诉我。

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 回答