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

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 SSL 과 중괄호를 결합하는 [해석] 속성에, 대한 이동이 아닙니다.

---

프로젝트가 커질 때 추가해야 할 동적 클래스 수에 따라 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"
      }

---

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

---

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

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

---

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

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

참고 URL : https://stackoverflow.com/questions/36209432/reactjs-add-dynamic-class-to-manual-class-names