24

我的应用程序中确实有一个公共区域和一个私人区域，我希望能够在公共视图中的任何地方显示登录模式对话框。模态应该有自己的路线。第二个用例是私人区域中的配置文件模式。

问题是当模态显示时，背景中的当前视图会消失，因为模态不是当前视图路由的子节点。

由于我不想将相同的模式添加到每个可能的视图路线，所以这里有一个问题：是否可以将模式路线与其父路线分离并在应用程序中的任何地方显示它们而无需主要内容呈现？最好的方法是什么？我发现了这个问题，但似乎不是同一个问题。

模式路由上的浏览器刷新不会在后台呈现任何内容，但这是我可以忍受的问题。

4

2 回答 2

24

我认为您最好的选择可能是使用 hiddenstate或查询字符串（用于永久链接）或两者，特别是如果可以在任何页面上显示模式（例如登录模式）。万一你不知道，React Router 公开了state历史 API 的一部分，允许你将数据存储在用户历史中，而这些数据在 URL 中实际上是不可见的。

这是我想到的一组路线；如果需要，您可以直接跳到JSBin 上的工作示例。您还可以在其自己的窗口中查看生成的示例应用程序，这样您就可以看到 URL 的变化（它使用散列位置策略来与 JSBin 兼容）并确保刷新按您的预期工作。

const router = (
  <Router>
    <Route component={LoginRedirect}>
      <Route component={LocationDisplay}>
        <Route path="/" component={ModalCheck}>
          <Route path="/login" component={makeComponent("login")} />
          <Route path="/one" component={makeComponent("one")} />
          <Route path="/two" component={makeComponent("two")} />
          <Route path="/users" component={makeComponent("users")}>
            <Route path=":userId" component={UserProfileComponent} />
          </Route>
        </Route>
      </Route>
    </Route>
  </Router>
);

让我们研究一下这些路线及其组成部分。

首先，makeComponent它只是一个方法，它接受一个字符串并创建一个 React 组件，该组件将该字符串呈现为标题，然后呈现其所有子项；这只是创建组件的一种快速方法。

LoginRedirect是一个有一个目的的组件：检查路径是否存在/login 或当前路径上是否有?login查询字符串。如果其中任何一个为真，并且当前状态不包含login密钥，则它将login状态上的密钥设置为true。如果匹配任何子路由（即始终呈现组件），则使用该路由。

class LoginRedirect extends React.Component {
  componentWillMount() {
    this.handleLoginRedirect(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.handleLoginRedirect(nextProps);
  }

  handleLoginRedirect(props) {
    const { location } = props;
    const state = location.state || {};
    const onLoginRoute = location.query.login || location.pathname === "/login";
    const needsStateChange = onLoginRoute && !state.login;
    if (needsStateChange) {
      // we hit a URL with ?login in it
      // replace state with the same URL but login modal state
      props.history.setState({login: true});
    }
  }

  render() {
    return React.Children.only(this.props.children);
  }
}

如果您不想使用查询字符串来显示登录模式，您当然可以修改此组件以满足您的需要。

接下来是LocationDisplay，但它只是我为 JSBin 演示构建的一个组件，它显示有关当前路径、状态和查询的信息，还显示了一组演示应用程序功能的链接。

登录状态对于下一个组件很重要，ModalCheck. 该组件负责检查login（或profile，或可能的任何其他）键的当前状态，并酌情显示关联的模态。（JSBin demo实现了一个超级简单的modal，你的肯定会更好。:)它还在主页上以文本形式显示了modal检查的状态。）

class ModalCheck extends React.Component {
  render() {
    const location = this.props.location;
    const state = location.state || {};
    const showingLoginModal = state.login === true;
    const showingProfileMoal = state.profile === true;

    const loginModal = showingLoginModal && <Modal location={location} stateKey="login"><LoginModal /></Modal>;
    const profileModal = showingProfileMoal && <Modal location={location} stateKey="profile"><ProfileModal /></Modal>;

    return (
      <div style={containerStyle}>
        <strong>Modal state:</strong>
        <ul>
          <li>Login modal: {showingLoginModal ? "Yes" : "No"}</li>
          <li>Profile modal: {showingProfileMoal ? "Yes" : "No"}</li>
        </ul>
        {loginModal}
        {profileModal}
        {this.props.children}
      </div>
    )
  }
}

其他一切都是相当标准的 React Router 东西。唯一需要注意的是Link里面的 sLocationDisplay显示了如何链接到应用程序中的各个位置，在某些情况下显示模式。

首先，您当然可以使用login查询字符串中的键链接（和永久链接）到任何要求它显示登录模式的页面：

<Link to="/one" query={{login: 1}}>/one?login</Link>
<Link to="/two" query={{login: 1}}>/two?login</Link>

当然，您也可以直接链接到/loginURL。

接下来，请注意您可以显式设置状态以便显示模式，这不会更改 URL。但是，它将保留在历史记录中，因此可以按照您的预期使用后退/前进，并且刷新将在同一背景页面的顶部显示模式。

<Link to="/one" state={{login: true}}>/one with login state</Link>
<Link to="/two" state={{login: true}}>/two with login state</Link>

您还可以链接到当前页面，添加特定的模式。

const path = props.location.pathname;

<Link to={path} state={{login: true}}>current path + login state</Link>
<Link to={path} state={{profile: true}}>current path + profile state</Link>

当然，取决于您希望应用程序如何工作，并非所有这些都适用或有用。例如，除非模态是真正全局的（也就是说，无论路由如何都可以显示），这可能工作正常，但对于显示给定用户的个人资料等模态，我可能会将其设为单独的路线，将其嵌套在父级中，例如：

<Route path="/users/:id" component={UserPage}>
  <Route path="/users/:id/profile" component={UserProfile} />
</Route>

UserProfile，在这种情况下，将是呈现模式的组件。

您可能想要进行更改的另一个示例是在历史记录中存储某些模式；如果您不想，请酌情使用replaceState代替。setState

于 2015-10-04T05:06:53.560 回答
0

使用 shouldComponentUpdate 这样做会很简单

<Router history={newHistory}>
        <Route path="/" component={App}>
          <Route path="home" component={Container} >
            <IndexRedirect to="home"/>
            <Route path="login" component={Authentication}/>
            <Route path="home" component={Home}/>
            <Route path="post/:id" component={Post}/>
          </Route>
        </Route>
</Router>


<Link to='/post/123' state={{isModal:true}}/>
<Link to='/home' state={{isModal:false}}/>
<Link to='/login' state={{isModal:true}}/>


Container = React.createClass({
  render() {
    let isModal = (location.state && location.state.modal);
      return (
        <div id="MeContainer">
          <ModalControlOpen isModal={isModal}>
            <Modal returnTo={this.props.location.pathname}>
              {this.props.children}
            </Modal>
          </ModalControlOpen>
          <ModalControlClose isModal={isModal}>
            {this.props.children}
          </ModalControlClose>
        </div>
      )
   
  }
});

ModalControlOpen = React.createClass({
  render(){
    if (this.props.isModal) {
      return (

        this.props.children
      )
    } else return <div></div>

  }
});

ModalControlClose = React.createClass({
  shouldComponentUpdate(nextProp){
    return !nextProp.isModal
  },
  render(){
    return (
      this.props.children
    )
  }
});

于 2016-01-16T03:17:27.043 回答