조건부로 클래스 속성을 적용하는 J에 반응

다음과 같은 부모 구성 요소에서 전달 된 내용에 따라이 버튼 그룹을 조건부로 표시하고 숨기고 싶습니다.

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

그러나 {this.props.showBulkActions? 'show': 'hidden'}. 내가 여기서 잘못하고 있습니까?

중괄호는 문자열 안에 있으므로 문자열로 평가됩니다. 외부에 있어야하므로 작동해야합니다.

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

"pull-right"다음에 공백이 있습니다. 실수로 "pull-right show"대신 "pull-rightshow"클래스를 제공하고 싶지 않습니다. 또한 괄호가 있어야합니다.

다른 사람들이 언급했듯이 classnames 유틸리티는 ReactJ에서 조건부 CSS 클래스 이름을 처리하기 위해 현재 권장되는 방법입니다.

귀하의 경우 솔루션은 다음과 같습니다.

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

참고로, 클래스 show와 hidden클래스 를 모두 사용하지 않도록 코드를 더 간단하게 만들 것을 제안합니다 . 기본적으로 무언가를 표시하기 위해 클래스를 설정할 필요는 없습니다.

트랜스 파일러 (예 : Babel 또는 Traceur)를 사용하는 경우 새로운 ES6 " 템플릿 문자열 "을 사용할 수 있습니다 .

다음은 @ spitfire109의 답변입니다.

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>

이 방법을 사용하면 하나 렌더링, 그런 깔끔한 일을 할 수 있습니다 s-is-shown또는 s-is-hidden:

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

여기에서 문자열 리터럴을 사용할 수 있습니다

const Angle = ({show}) => {

   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

   return <i className={angle} />
}

@ spitfire109의 훌륭한 대답을 따르면 다음과 같이 할 수 있습니다.

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

그런 다음 render 함수 내에서 :

<div className={this.rootClassNames()}></div>

jsx를 짧게 유지

또는 npm classnames를 사용하십시오 . 특히 클래스 목록을 구성하는 데 매우 쉽고 유용합니다.

옵션 클래스 이름이 하나만 필요한 경우 :

<div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}>

클래스 이름 대신 ES6 배열을 사용할 수 있습니다. 대답은 Dr. Axel Rauschmayer 기사 : 조건부로 배열 및 객체 리터럴에 항목 추가을 기반으로 합니다 .

<div className={[
                 "classAlwaysPresent", 
                 ...Array.from(condition && ["classIfTrue"])
                ].join(" ")} />

2019 년

반응은 많은 유틸리티의 호수입니다. 하지만 npm패키지는 필요하지 않습니다 . 함수를 어딘가에 만들고 classnames필요할 때 호출하십시오.

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

또는

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' ');
}

예

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

영감을 위해

선언 헬퍼 소자 및 그것을 사용하는 toggle방법을

(DOMToken​List)classList.toggle(class,condition)

예:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}

유지 보수 및 가독성에 더 적합한보다 우아한 솔루션 :

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

이것을 사용할 수 있습니다 :

<div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}>

이것은 당신을 위해 일할 것입니다

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

이 npm 패키지를 사용할 수 있습니다 . 모든 것을 처리하고 변수 또는 함수를 기반으로 정적 및 동적 클래스에 대한 옵션이 있습니다.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"

값에 this.props.showBulkActions따라 다음과 같이 클래스를 동적으로 전환 할 수 있습니다.

<div ...{...this.props.showBulkActions 
? { className: 'btn-group pull-right show' } 
: { className: 'btn-group pull-right hidden' }}>

클래스의 일부로 가변 컨텐츠 를 사용할 수도 있다고 덧붙이고 싶습니다.

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

컨텍스트는 봇과 사용자 간의 대화이며 발신자에 따라 스타일이 변경되며 이는 브라우저 결과입니다.

<img src="http://imageurl" alt="Avatar" class="img-bot">

추가 할 클래스가 둘 이상있을 때 유용합니다. 공백으로 배열의 모든 클래스를 결합 할 수 있습니다.

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

바꾸다:

<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">`

와:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}

@split 화재 대답 참조, 우리는 참고로, 더 읽을 수있는 템플릿 리터럴로 업데이트 할 수 있습니다 체크 아웃 자바 스크립트 템플릿 문자

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>

나는 이것을 삼항 및 클래스 이름 라이브러리로 수행하는 방법을 설명합니다.