Question

我有一个名为MainContainer的反应类，它显示了一些内容。它有一个孩子，SidebarContainer列出了一堆链接。我渲染我的主容器，默认情况下，如果URL中没有param值，则使用默认ID 1作为后备加载第一段内容：

var MainContainer = React.createClass({
  getInitialState: function() {
    return {
      selectedContent: this.props.params.slug || 1
  },

  componentWillReceiveProps: function(nextProps, nextState) {
    this.setState({
      selectedContent: this.props.params.slug || 1
    });
  },
}

SidebarContainer组件有一个链接选择器：

<Link to={content.slug}>
  {content.title}
</Link>

当我点击该链接时，浏览器的网址会发生明显变化，但不会发生任何其他情况。当我再次单击时，会呈现正确的内容。但是，当我使用指定的参数复制粘贴网址时，它会首次呈现正确的内容。

我的ReactDOM渲染方法具有以下react-router配置：

ReactDOM.render((
  <Router>
    <Route path="/" component={MainContainer}/>
    <Route path="/content/:slug" component={MainContainer}/>
  </Router>
), document.getElementById('react-app'));

我是否错误地使用了componentWillReceiveProps生命周期方法？

Answer 1

在componentWillReceiveProps内，你不应该使用nextProps而不是this.props吗？

this.setState({
      selectedContent: nextProps.params.slug || 1
});

Answer 2

导航后强制更新页面的有效方法包括根据路由器参数为页面组件分配密钥。这样，如果您使用不同的参数导航到同一页面，react将卸载前一个并挂载新的参数。

这个技巧可以帮助您避免重置组件的问题。内部状态手动并防止一些错误从前一页面出现陈旧状态。

Answer 3

使用内部状态很奇怪，而您可以直接在组件内的任何位置访问this.props.slug。

顺便说一句，路由器上可能有什么东西丢失了？ browserHistory？

import {browserHistory} from 'react-router'

<Router history={browserHistory}>
    ...
</Router>

使用react-router重复使用相同的组件两次

3 个答案: