Babel을 사용하여 React 요소에 클래스를 동적으로 추가하는 방법은 무엇입니까?

Babel의 동적 클래스 추가

동적 콘텐츠로 작업할 때 요소에 클래스를 추가해야 하는 경우가 종종 있습니다. Babel을 활용하는 React 애플리케이션에서는 className 속성을 통해 이를 달성할 수 있습니다.

질문:

동적 클래스를 기존 클래스 목록에 어떻게 추가할 수 있나요? 예를 들어, className이 "wrapper searchDiv"인 React 구성 요소는 "wrapper searchDiv {this.state.something}"으로 동적으로 업데이트해야 합니다.

답변:

이를 달성하기 위한 두 가지 접근 방식이 있습니다:

1. 기존 JavaScript 방법:

다음과 같이 JavaScript를 사용하여 className 속성 내에 추가 클래스를 추가합니다.

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

2. 문자열 템플릿 방법:

백틱을 사용하여 문자열 템플릿을 생성하면 더 깔끔하고 간결한 코드가 가능합니다.

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

두 방법 모두에서 중괄호에는 JavaScript 코드가 포함됩니다. 문자열을 수정하고 동적 값을 추가할 수 있습니다. 그러나 속성 내에서 JSX 문자열과 중괄호를 결합하는 것은 지원되지 않는다는 점에 유의하는 것이 중요합니다.

위 내용은 Babel을 사용하여 React 요소에 클래스를 동적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!