Cómo cambiar de clase en el componente anidado en ReactJS

Question

Me han dicho método render() en mi componente de la 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>
    );
}

Cuando quiero cambiar el 'activo' de la clase entre QuestionA y QuestionB componentes cuando el usuario hace clic en el botón.¿Cómo puedo hacer esto?Tenga en cuenta, que QuestionA y QuestionB se establecen sus propios nombres de clases en su render() métodos.Por ejemplo QuestionB render():

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

Answer 1

Hay un par de maneras en que podría manejar esto.

Si desea que el padre controla la clase adicional, simplemente puede pasarla a los componentes secundarios y pídales que lo agreguen a su nombre de clase existente ( JSFiddle Demo ):

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 la clase y simplemente envíe algunos datos para indicar si debe establecer su clase activa ( JSFIDDLE DEMO ):

// 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' });
  }
});

Answer 2

Como Brian Voelker mencionó que en el comentarios, la ahora de manera oficial para manipular las clases en Reaccionar es el uso de la los nombres de clases utilidad.

Usted puede definir sus 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 pasar un active prop para cambiar el nombre de la clase.

Answer 3

Tuve un problema similar a esto, creé un cajón con pestañas y solo estaba haciendo el componente solicitado con el Tabber, pero dicha solución no era ideal ya que estaba perdiendo el estado del componente del niño cada vez que cambié a otro con otro conel taber.

Para evitar esto en el Render, llamo a una función para que todos mis hijos, en esta función le envuelven a cada niño en un div y asigno el nombre de clase necesario al div, en mi caso, necesitaba mostrar un único componente porTiempo, así que estaba usando Pantalla: Bloquear o ninguna, dependiendo del botón, haga clic.

renderMyChilds() {
        var renderedComponents = this.props.children.map(function(child, _key) {
            if(this.state.drawerOpened == true) {
                var ElementToRender = child;
                var MyElement = (this.state.buttonSelected != _key) ? <div className="hiddenComponent"><ElementToRender /></div> : <div><ElementToRender /></div>;

            } else {
                var ElementToRender = child;
                var MyElement = <div><ElementToRender className="hiddenComponent" /></div>;
            }
            return (MyElement);
        }, this);
        return renderedComponents;
    }

.hiddencomponent { Pantalla: Ninguno; }

.visiblecomponent { bloqueo de pantalla; }