ReactJS가 수동 클래스 이름에 동적 클래스 추가

일반 클래스 목록에 동적 클래스를 추가해야하지만 다음과 같은 방법 (아기 사용)을 모릅니다.

<div className="wrapper searchDiv {this.state.something}">
...
</div>

어떤 아이디어?

일반적인 JavaScript 중 하나를 수행 할 수 있습니다.

className={'wrapper searchDiv ' + this.state.something}

또는 백틱이있는 문자열 템플릿 버전 :

className={`wrapper searchDiv ${this.state.something}`}

두 유형 모두 물론 JavaScript 일 뿐이지 만 첫 번째 패턴은 전통적인 종류입니다.

어쨌든 JSX에서는 중괄호로 묶인 모든 것이 JavaScript로 실행되므로 기본적으로 원하는 모든 것을 할 수 있습니다. 그러나 JSX 문자열 과 중괄호를 결합하는 것은 속성에 대한 이동이 아닙니다.

프로젝트가 커질 때 추가해야 할 동적 클래스 수에 따라 GitHub에서 JedWatson 의 클래스 이름 유틸리티를 확인하는 것이 좋습니다. 조건부 클래스를 객체로 표시하고 true로 평가되는 클래스를 반환합니다.

따라서 React 문서의 예를 들면 다음과 같습니다.

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

상태 변경이있는 경우 React가 다시 렌더링을 트리거하므로 동적 클래스 이름은 자연스럽게 처리되고 구성 요소의 상태에 따라 최신 상태로 유지됩니다.

가능한 간단한 구문은 다음과 같습니다.

<div className={`wrapper searchDiv ${this.state.something}`}>

다음은 Dynamic className에 대한 최상의 옵션입니다. Javascript에서와 마찬가지로 연결을 수행하십시오.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

상태 조건에 따라 표시되어야하는 스타일 이름이 필요한 경우이 구성을 사용하는 것이 좋습니다.

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

후크를 사용하여 시도하십시오.

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

그리고 이것을 className 속성에 추가하십시오 :

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

수업을 추가하려면 :

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

수업을 삭제하려면 :

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

이 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', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

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

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

이 솔루션은 React SPFx에서 시도 및 테스트되었습니다.

또한 import 문을 추가하십시오.

import { css } from 'office-ui-fabric-react/lib/Utilities';