템플릿 리터럴을 사용하여 ReactJS 구성 요소에 여러 클래스를 추가하는 방법은 무엇입니까?

템플릿 리터럴을 사용하여 ReactJS 구성 요소에 여러 클래스 추가

ReactJS의 구성 요소에 여러 클래스를 추가하려면 ES6 템플릿 리터럴을 활용할 수 있습니다. 이 방법은 문자열과 변수를 단일 표현식으로 결합하는 간결하고 효율적인 방법을 제공합니다.

1단계: 클래스 변수 정의

구성 요소의 렌더링 메서드 내에서 추가하려는 클래스를 저장하는 변수입니다. 예:

const activeClass = this.state.focused === index ? 'active' : '';

이 변수는 구성 요소의 상태에 따라 '활성' 클래스를 조건부로 설정합니다.

2단계: 템플릿 리터럴을 사용하여 클래스 결합

템플릿 리터럴을 사용하면 백틱(`)을 사용하여 여러 줄 문자열을 만들 수 있습니다. ${} 구문을 사용하여 문자열 내에 클래스 변수를 포함합니다.

const classes = `${activeClass} data.class main-class`;

이 줄은 'activeClass', 'data.class' 및 'main-class' 변수를 단일 문자열로 연결합니다.

3단계: className 속성에 할당

JSX 요소에서 할당 'classes' 변수를 'className' 속성에 추가합니다. 이렇게 하면 모든 클래스가 요소에 적용됩니다.

<li key={index} className={classes}>...</li>

One-Liner 솔루션

one-liner 버전을 사용하여 이러한 단계를 한 줄로 결합할 수 있습니다. :

const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;

여기서 'this.state.valid'는 조건부로 'error'를 추가하는 상태 변수입니다. 수업.

위 내용은 템플릿 리터럴을 사용하여 ReactJS 구성 요소에 여러 클래스를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!