Question

这是我的index.js：

var routes = require('./config/routes');
ReactDOM.render(routes, document.getElementById('app'));

以下是我的路线：

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={HomeComponent}/>
      <Route path='create' component={CreateComponent} />
    </Route>
  </Router>
);

最后我的主容器（Main.js）：

var Main = React.createClass({    
  render: function () {      
    return (    
      <div> 
       <NavBarComponent onHome={onHome}/> //onHome is a boolean returning whether on home page or not
       {this.props.children}
       <FooterComponent/>
      </div>
    )   
  }   
});

正如您所看到的，NavBarComponent和FooterComponent对于所有页面都是通用的。我的NavBarComponent有两种不同的样式，具体取决于是否在主页上。以下是我对这两种情况的代码：

let className = props.onHome ?
                "navbar navbar-default navbar-fixed-top"
                : 
                "navbar navbar-default inner-header";
let role = props.onHome ? "navigation" : "";
let dataSpy = props.onHome ? "affix" : "";
let dataOffsetTop = props.onHome ? "100" : "";
return (       
  <nav id="mainNav" className={className} role={role} data-spy={dataSpy} data-offset-top={dataOffsetTop}>
  <!-- Some NavBar code -->
  </nav>
);

除了网址更改（从网页路由到另一个网页）时，此代码工作正常。它在打开home（myUrl /）或注册（myUrl / signUp）时非常有效。但是当从home路由到signUp或从signUp路由到home时，虽然正在更新navbar属性，但它保持相同的行为。我认为即使更新了navbar属性，其行为也会被缓存。

仅供参考，以下是两种情况下的导航栏属性：

1)On Home page : 
1-1)case 1 : on top of screen 
<nav id="mainNav" 
     className="navbar navbar-default navbar-fixed-top affix-top" 
     role="navigation" 
     data-spy="affix" 
     data-offset-top="100">

1-2)case 2 : when scrolling down
<nav id="mainNav" 
     className="navbar navbar-default navbar-fixed-top affix"
     role="navigation" 
     data-spy="affix" 
     data-offset-top="100">

2)On Sign Up page : 
<nav id="mainNav" 
     className="navbar navbar-default inner-header" 
     role="" 
     data-spy="" 
     data-offset-top="">

ReactJS - Scrollspy在页面更改时无法正常工作

0 个答案: