JSX의 정적 클래스 이름에 동적 클래스를 어떻게 추가할 수 있나요?

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

Babel의 JavaScript 기반 JSX 컨텍스트에서 동적 클래스를 추가해야 할 수도 있습니다. 클래스를 기존 클래스 목록에 추가합니다. 이를 달성하는 방법은 다음과 같습니다.

두 가지 기본 접근 방식:

기존 JavaScript:

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

이 방법은 다음을 결합합니다. 동적 클래스를 추가하기 위한 일반 문자열 연결 name.

문자열 템플릿 버전:

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

여기서 백틱은 JavaScript 표현식 보간을 허용하는 문자열 템플릿을 만드는 데 사용됩니다.

JSX 관련 고려 사항:

JSX에서는 중괄호는 JavaScript 코드를 묶으므로 그 안의 모든 내용이 실행됩니다. 그러나 JSX 문자열을 속성에 대한 중괄호와 결합할 때 주의할 점이 있습니다.

대안:

또는 Babel의 변환 클래스 속성 플러그인을 활용하여 클래스를 활성화할 수 있습니다. 다음 형식의 속성 할당:

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

위 내용은 JSX의 정적 클래스 이름에 동적 클래스를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!