ReactJSのネストされたコンポーネントでクラスを切り替える方法

Question

私のルートコンポーネントにこのようなレンダリング（）メソッドを持っています：

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

. ユーザーがボタンをクリックしたときにアンケートとアンケートのコンポーネントの間の「アクティブ」クラスを切り替えたい場所。これどうやってするの？アンケートとアンケートBが自分のクラス名をRender（）メソッドに設定されていることに注意してください。たとえば、アンケートのレンダリング（）：

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

.

Answer 1

これを扱うことができるカップルの方法があります。

親に追加のクラスを制御する場合は、単に子コンポーネントに渡すことができ、既存のクラス名（ 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

Comments 、Reactでクラスを操作するための現在公式の方法は classnames ユーティリティ

あなたの2つのコンポーネントをそのようなものに定義することができます。

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>
    )
  }

}

.

と同名のCROADETAGCODE PROPを渡すだけです。

Answer 3

私はこれと似た問題を抱えていました、私はタブ付き引き出しを作成し、私はタブバーで要求されたコンポーネントだけをレンダリングしましたが、私は子供コンポーネントの状態を失っていたので理想的ではありませんでした。タブバー。

この関数を呼び出すことを避けるために、すべての子供をレンダリングするための関数を呼び出します。この関数では、各子をDIVに折り、必要なクラス名をDIVに割り当て、1つのコンポーネントを表示する必要があります。時間を使用しています：ボタンをクリックするに応じてブロックまたはなし。

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 { 表示：なし }

.visibleComponent { 表示ブロック; }