Реагировать «активный» класс на компонент меню

Question

Я нобее, чтобы реактивировать и пытаться передать «активное» имя класса Nav-компоненту, чтобы отразить текущую страницу. Я могу, очевидно, это сделать с 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 для условного объединения имен классов. Это позволит вам динамически устанавливать стиль на основе событий