ReactJS 구성 요소의 className 속성에 여러 클래스를 어떻게 추가할 수 있나요?

ReactJS 구성 요소의 여러 클래스: 자세한 솔루션

ReactJS 및 JSX로 작업할 때 구성 요소의 className 속성에 여러 클래스를 추가하는 것은 다음과 같습니다. 일반적인 작업. 이 문서에서는 깔끔하고 간결한 솔루션을 제공하면서 ES6 템플릿 리터럴을 사용하여 이를 달성하는 방법을 보여줍니다.

다음 스니펫을 고려하세요.

<li key={index} className={activeClass, data.class, "main-class"}></li>

이 코드는 여러 클래스 이름을 className에 연결하려고 시도합니다. 속성이지만 이를 className 속성에 별도의 인수로 잘못 할당합니다. 대신 템플릿 리터럴을 사용하여 원하는 클래스가 포함된 문자열을 생성해야 합니다.

ES6 템플릿 리터럴을 사용하여 수정된 코드는 다음과 같습니다.

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

클래스 이름을 중괄호로 묶습니다. 백틱 내부에서 이를 단일 문자열로 연결할 수 있습니다. 그런 다음 className 속성은 동적으로 생성된 문자열을 수신하여 구성 요소에 지정된 모든 클래스가 있는지 확인합니다.

또 다른 편리한 방법은 단일 라이너 버전입니다.

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

조건식을 사용합니다. 조건에 따라 클래스 간을 전환하려면 백틱 내부에 있어야 합니다. 이 예에서는 유효한 상태 속성이 false인 경우에만 'error' 클래스가 추가됩니다.

이러한 기술은 ReactJS 구성 요소에 여러 클래스를 추가하기 위한 간단하고 우아한 솔루션을 제공하여 스타일을 더 쉽게 지정하고 향상시킬 수 있습니다. 기능을 제공합니다.

위 내용은 ReactJS 구성 요소의 className 속성에 여러 클래스를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!