React 구성 요소에 클래스를 동적으로 추가하려면 어떻게 해야 합니까?

React에서 동적으로 클래스 이름 강화

React에서는 사전 정의된 클래스 이름 집합에 클래스를 동적으로 추가해야 하는 경우가 많습니다. Babel은 이 시나리오에 편리한 솔루션을 제공합니다.

동적 클래스 추가 달성

일반 클래스 목록에 동적 클래스를 추가하려면 JSX에서 다음 접근 방식을 활용할 수 있습니다.

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

이 코드 조각은 문자열 리터럴 "wrapper searchDiv"를 this.state.something 값과 연결하여 className. 또는 문자열 템플릿을 사용할 수 있습니다.

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

이 두 솔루션 모두 JSX에서 중괄호로 묶인 모든 항목이 JavaScript로 실행된다는 사실에 의존합니다. 따라서 변수나 상태 값을 사용하여 클래스 이름을 동적으로 생성할 수 있는 유연성이 있습니다.

중요 사항

속성에 대해 JSX 문자열과 중괄호를 결합하고 싶은 유혹이 있지만 이를 피하는 것이 중요합니다. 관행. JSX에서는 중괄호 안에 JavaScript만 허용됩니다.

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