將'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。這將允許您根據事件動態設置樣式