조건부로 클래스 속성을 적용하는 React Js

조건부로 클래스 속성을 적용하는 React Js

다음과 같은 부모 컴포넌트에서 전달되는 내용에 따라 이 버튼 그룹을 조건부로 표시 및 숨깁니다.

<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-right show" 클래스를 제공하고 싶지 않습니다.괄호도 거기에 있어야 돼요.

다른 사람들이 코멘트했듯이 Classnames 유틸리티는 ReactJs에서 조건부 CSS 클래스 이름을 처리하기 위해 현재 권장되는 접근법입니다.

고객의 경우 솔루션은 다음과 같습니다.

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

...

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

참고로 두 가지 모두 사용하지 않도록 하는 것이 좋습니다.show그리고.hidden더 간단한 암호를 만들 수 있습니다.대부분의 경우 기본적으로 표시되도록 클래스를 설정할 필요가 없습니다.

2021 부록: 성능 향상을 위해 clsx를 대안으로 검토할 수 있습니다.

트랜스필러(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} />
}

예를 들어 다음과 같은 작업을 수행할 수 있습니다.

let classNameDependsOnCondtion = i18n.language == 'en' ? "classname" : "";

className={`flex flex-col lg:flex-row list-none ${classNameDependsOnCondtion }`}

또는

className={`flex flex-col lg:flex-row list-none ${i18n.language == 'en' ? "classname" : ""}`}

옵션 클래스 이름을 하나만 필요로 하는 경우:

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

또는 npm 클래스명을 사용합니다.그것은 매우 쉽고 특히 수업 목록을 구성하는데 유용하다.

@spitfire109의 훌륭한 답변에 대해 다음과 같이 대답할 수 있습니다.

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

  return names.join(' ');
}

렌더링 기능 내에서 다음을 수행합니다.

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

jsx를 짧게 유지하다

대체:

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

포함:

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

클래스 이름 대신 ES6 어레이를 사용할 수 있습니다.정답은 닥터에 기초하고 있다.Axel Rauschmayer 기사: Array 및 객체 리터럴에 조건부로 엔트리를 추가합니다.

<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( ([cls,enb]) => enb? cls: '' ).join(' ');
}

예

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

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

영감을 얻기 위해

도우미 DOM 요소 선언 및 네이티브 사용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')}>

이 기능은 추가할 클래스가 두 개 이상 있는 경우에 유용합니다.배열의 모든 클래스를 공백으로 조인할 수 있습니다.

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

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean) 는 어레이에서 "false" 값을 삭제합니다.클래스 이름은 문자열이어야 하므로 이 이외의 항목은 필터링된 새 배열에 포함되지 않습니다.

console.log(  ['foo', true  && 'bar'].filter(Boolean).join(' ')  )
console.log(  ['foo', false && 'bar'].filter(Boolean).join(' ')  )

함수로 작성된 위의 내용:

const cx = (...list) => list.filter(Boolean).join(' ')

// usage:
<div className={cx('foo', condition && 'bar')} />

var cx = (...list) => list.filter(Boolean).join(' ')
console.log(  cx('foo', 1 && 'bar', 1 && 'baz')  )
console.log(  cx('foo', 0 && 'bar', 1 && 'baz')  )
console.log(  cx('foo', 0 && 'bar', 0 && 'baz')  )

간단히 이 방법을 사용하세요.

<div className={`${this.props.showActions ? 'shown' : 'hidden'}`}>

이게 훨씬 더 깔끔하고 깨끗해요.

이것으로 충분할 것 같습니다.

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

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

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

@split fire answer를 참조하면 보다 읽기 쉬운 템플릿 리터럴로 업데이트할 수 있습니다.참조용으로 javascript 템플릿 리터럴 체크아웃

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

이 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">

매개 변수를 기준으로 올바른 클래스를 반환하는 함수(존재하는 경우)

  getClass(param){
    let podClass = 'classA'
    switch(param.toLowerCase()){
        case 'B':
            podClass  = 'classB'
            break;
        case 'C':
            podClass  = 'classC'
            break;
    }
    return podClass
}

이제 해당 클래스가 적용되는 div에서 이 함수를 호출합니다.

 <div className={anyOtherClass + this.getClass(param)}

이 로직을 사용하여 부트스트랩 테이블 행에 올바른 색상을 적용했습니다.

<div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div>

정적 클래스 이름 뒤에 공백을 추가하는 것을 잊지 마십시오.

언급URL : https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes