리스 젝트의 중첩 구성 요소에서 클래스를 전환하는 방법

Question

I 내 루트 구성 요소에 resens () 메소드가 있습니다.

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

.

사용자가 버튼을 클릭하면 징후와 QuesterB 구성 요소간에 'Active'클래스를 토글하고 싶습니다.어떻게해야합니까?징후와 질문은 render () 메소드에서 자신의 클래스 이름을 설정합니다.예 : QuestionB의 render () :

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

.

Answer 1

이 문제를 처리 할 수있는 몇 가지 방법이 있습니다.

부모가 추가 클래스를 제어하도록하려면 하위 구성 요소에 간단히 전달할 수 있으며 기존 클래스 이름 ( 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' });
  }
});

.

그러나 자식이 클래스 이름을 관리 할 수있게하는 것이 더 적합하며 활성 클래스 ( 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

Brian Voelker 댓글 반응에서 클래스를 조작하는 공식적인 방법은 클래스 이름 유틸리티.

다음과 같은 두 가지 구성 요소를 정의 할 수 있습니다 :

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

}

.

및 단순히 이름 이익 클래스를 전환하기 위해 active prop을 전달하기 만하면됩니다.

Answer 3

나는 이와 유사한 문제가 있었고, 나는 탭 서랍을 만들었고, 나는 탭으로 요구되는 구성 요소 만 렌더링하고 있었다. 그러나 나는 다른 하나로 전환 된 것으로 매번 하위 구성 요소의 상태를 잃어 버렸기 때문에 그런 솔루션이 이상적이지 않았다.tabber.

이 함수를 호출하면 모든 자식을 렌더링하는 기능을 호출합니다.이 기능에서 DIV의 각 자식을 래핑하고 DIV에 필요한 클래스 이름을 할당하는 경우 내 경우에 단일 구성 요소를 표시해야했습니다.디스플레이를 사용하고 있었기 때문에 시간 : 블록 또는 없음 버튼을 클릭하십시오.

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 { 디스플레이 : 블록; }