将'active'类传递给菜单组件

Question

React正在尝试将“活动”className传递给导航组件以反映当前页面。我明显可以用jQuery来做到这一点，但我正在努力学习在React中做到这一点的“正确”方式。

这里是一个非工作的FIDDLE，我敢肯定有很多问题，但是我试图达到的核心。

//APP 

const App = ({ children }) => (
    <div id="app"> 
    <section id="nav"> 
     <TopNav /> 
    </section> 
    <main> 
     {children || 'Welcome'} 
    </main> 
    </div> 
); 

App.propTypes = { children: React.PropTypes.object }; 

ReactDOM.render(
    (<Router> 
    <Route path="/" component={App}> 
     <Route path="/pageone" component={PageOne} /> 
     <Route path="/pagetwo" component={PageTwo} /> 
    </Route> 
    </Router>), document.getElementById('content') 
); 

Answer 1

您还可以使用https://github.com/JedWatson/classnames来有条件地加入className。这将允许您根据事件动态设置样式