[javascript] 조건부로 클래스 속성을 적용하는 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" : "")}>