JSX의 정적 클래스 이름에 클래스를 동적으로 추가하려면 어떻게 해야 합니까?

JSX에서 수동 클래스 이름에 동적으로 클래스 추가

JSX에서는 특정 조건에 따라 요소에 클래스를 동적으로 추가해야 하는 경우가 많습니다. 이를 위해서는 정적 클래스 이름과 동적 클래스 이름을 모두 포함하도록 className 속성을 조작해야 합니다. 이를 달성하는 방법은 다음과 같습니다.

JavaScript 구문 사용

일반 JavaScript 구문을 사용하여 수동 클래스 이름에 동적 클래스를 추가할 수 있습니다.

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

이것은 정적 클래스 이름 "wrapper" 및 "searchDiv"를 상태 속성에 의해 결정된 동적 클래스 이름과 연결합니다. this.state.something.

문자열 템플릿 사용

또는 백틱과 함께 문자열 템플릿(ES6 템플릿 리터럴)을 사용할 수 있습니다.

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

이 구문을 사용하면 동적 클래스를 포함하여 JavaScript 표현식을 문자열에 직접 삽입할 수 있습니다.

참고:

JSX에서 중괄호로 묶인 모든 항목은 JavaScript 코드로 해석됩니다. 따라서 className 속성 내에서 필요에 따라 복잡한 논리를 수행하고 문자열을 조작할 수 있습니다. 그러나 속성 내에서 JSX 문자열과 중괄호를 직접 결합할 수는 없습니다.

위 내용은 JSX의 정적 클래스 이름에 클래스를 동적으로 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!