Cómo alternar la class en el componente nested en ReactJS

Tengo dicho método render () en mi componente raíz:

render: function() { return ( <div className="question"> <QuestionA question={this.props.question} author={this.props.author}/> <QuestionB yes={this.state.yes} no={this.state.no} /> <div className="question-side-switcher" onClick={this.handleSideChanging}></div> </div> ); } 

Donde deseo alternar la class 'activa' entre los componentes de QuestionA y QuestionB cuando el usuario hace clic en el button. ¿Cómo puedo hacer esto? Tenga en count que QuestionA y QuestionB tienen sus propios classNames en sus methods render (). Por ejemplo, el renderizado de QuestionB ():

 render: function() { return ( <section className="question-b-container"> ... </section> ); } 

Hay un par de forms en que puedes manejar esto.

Si desea que el padre controle la class adicional, puede simplemente pasarla a los componentes secundarios y hacer que la agreguen a su nombre de class existente ( demostración de JSFiddle ):

 var QuestionA = React.createClass({ render: function() { return <section className={this.props.className + " question-a-container"}>Section A</section>; } }); var QuestionB = React.createClass({ render: function() { return <section className={this.props.className + " question-b-container"}>Section B</section>; } }); var Root = React.createClass({ getInitialState: function() { return { question: 'a' }; }, render: function() { var qAclassName = this.state.question === 'a' ? 'active' : ''; var qBclassName = this.state.question === 'b' ? 'active' : ''; return ( <div className="question"> <QuestionA className={qAclassName} /> <QuestionB className={qBclassName} /> <div className="question-side-switcher" onClick={this.handleSideChanging}>Change</div> </div> ); }, handleSideChanging: function() { this.setState({question: this.state.question === 'a' ? 'b' : 'a' }); } }); 

Sin embargo, probablemente tenga más sentido dejar que el niño administre el nombre de class, y simplemente enviar algunos datos para indicar si debe establecer su class activa ( demostración de JSFiddle ):

 // Using classSet to more easily create conditional class names; // see http://facebook.github.io/react/docs/class-name-manipulation.html var cx = React.addons.classSet; var QuestionA = React.createClass({ render: function() { // always set "question-a-container"; // set "active" if we got a truthy prop named `active` var className = cx({ "question-a-container": true, "active": this.props.active }); return <section className={className}>Section A</section>; } }); var QuestionB = React.createClass({ render: function() { // always set "question-b-container"; // set "active" if we got a truthy prop named `active` var className = cx({ "question-b-container": true, "active": this.props.active }); return <section className={className}>Section B</section>; } }); var Root = React.createClass({ getInitialState: function() { return { question: 'a' }; }, render: function() { return ( <div className="question"> {/* For each question, compare to state to see if it's active. */} <QuestionA active={this.state.question === 'a'} /> <QuestionB active={this.state.question === 'b'} /> <div className="question-side-switcher" onClick={this.handleSideChanging}>Change</div> </div> ); }, handleSideChanging: function() { this.setState({question: this.state.question === 'a' ? 'b' : 'a' }); } }); 

Como Brian Voelker lo mencionó en los comentarios , la forma oficial ahora de manipular classs en React es usar la utilidad classnames .

Podrías definir tus dos componentes así:

 import React, { Component } from 'react' import classNames from 'classnames' class QuestionA extends Component { render () { const { active } = this.props const cx = classNames('question-a-container', { active }) return ( <section className={cx}></section> ) } } 

Y simplemente pásales un apoyo active para alternar la class homónima.