React-JSX에서 클래스와 스타일의 동적 바인딩을 구현하는 방법(예제 포함)

이 기사의 내용은 React-JSX에서 클래스와 스타일의 동적 바인딩을 구현하는 방법에 대한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 것입니다.

요약: 요소의 클래스 목록과 인라인 스타일을 조작하는 것은 데이터 바인딩의 일반적인 요구 사항입니다. dom 요소를 자주 조작하면 JavaScript 성능이 저하됩니다. 고성능 js를 달성하려면 클래스와 스타일의 동적 바인딩이 필수입니다. 우수한 자격을 갖춘 프로그래머를 선택합니다. 이 글은 React-JSX 구문을 기반으로 하고 다른 프레임워크의 구현 방법과 결합하여 ClassName과 Style의 동적 바인딩을 구현하는 방법을 소개합니다.

참고: 이 기사의 예제는 검증되었습니다. 오류가 있으면 비판하고 수정하세요.

Bind HTML Class

Object 구문

className에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다.

참고: vue 및 작은 프로그램과 같은 개체 구문은 지원되지 않습니다.

오류 예:

render(){
  return <p className={ &#39;box-color&#39;：this.state.isError }>hello world</p>
}

구현할 수 있는 구문은 다음과 같습니다.

1 논리 연산자를 사용하세요

css 파일

.box-color {
  color：red;
}

js 파일

render(){
  return <p className={ this.state.isError && &#39;box-color&#39; }>hello world</p>
}

2. 세 개의 메타 연산자를 사용하세요

css 파일

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p className={ this.state.isShow ? &#39;box-show&#39; : &#39;box-hide&#39; }>hello world</p>
}

3. 함수를 사용하여 바인딩된 데이터 객체

는 템플릿에서 인라인으로 정의할 필요가 없습니다. vue

에서 계산된 후크 함수와 유사한 함수를 정의할 수 있습니다. js 파일

getIsError() {
  return this.state.isError ? 'box-color' : '';
}

render(){
  return <p className={ this.getIsError() }>hello world</p>
}

참고: 다음과 같은 개체 변수 작성 방법은 지원되지 않으며 오류가 보고되지 않습니다. 콘솔 클래스 이름은 유효하지 않은 [object object]로 표시됩니다.

const classObj = {
  'box-show': this.state.isShow,
  'box-color': this.state.isError
}

render(){
  return <p className={ classObj }>hello world</p>
}

일반적으로 함수 바인딩 방법은 프로젝트 로직이 상대적으로 복잡한 시나리오에서 사용됩니다. 너무 많이 사용하면 뷰 레이어와 로직 레이어가 혼동되어 읽기 및 유지 관리가 어려워지는 것을 권장합니다. 클래스 정의를 동적으로 바인딩하는 연산자 및 삼항 연산자 메서드입니다.

Array 구문

React-JSX 구문은 className 배열 구문을 지원하지 않습니다. 다음 예를 시도해 보세요.

css file

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

js file

this.state = {isShow: false}

render(){
  return <p className={ this.state.isShow ? &#39;box-color&#39; : [ &#39;box-color&#39;, &#39;box-hide&#39;] }>hello world</p>
}

Console 표시 결과(잘못됨, 중간에 추가 쉼표가 있음):

<p class="box-color, box-hide">hello world</p>

참고: 배열 구문을 지원하지 않기 때문에 "box-color"의 스타일을 "box-hide"로 재사용하고 삼항 연산자를 사용하여 표현하면 CSS 코드의 양이 늘어납니다.

바인드 인라인 스타일

객체 구문

스타일 객체 구문은 clasName 객체보다 더 직관적이며, 처리 기능이 더 간단합니다. 논리 연산자 메서드와 함수 바인딩 메서드는 className 구현을 참조할 수 있습니다. 아래 사용법:

삼항 연산자

Vue의 vue-if 및 WeChat 애플릿의 wx-if 명령과 유사하며 스타일 삼항 연산자

js 파일

render(){
  return <p style={ this.state.isShow ? {display: &#39;inline-block&#39;} : { display: &#39;none&#39;} }>hello world</p>
}

Array 구문

React-JSX를 사용하여 동적으로 구현할 수 있습니다. 스타일 배열 구문을 지원하지 않습니다. 예를 들어보세요.

js 파일

render(){
  return <p style={ this.state.isShow ? {color: &#39;red&#39;} : [{color: &#39;red&#39;}, {display: &#39;inline-block&#39;}] }></p>
}

콘솔 표시 결과(잘못됨):

<p></p>

간단히 말하면, 고품질로 프로젝트 요구 사항을 완료하고 점점 더 복잡해지는 비즈니스 시나리오에 대처하려면 많은 수의 DOM 요소를 조작하고 스타일 변수에 무작위로 이름을 지정한 다음 이를 클래스와 스타일에 바인딩하는 것은 권장되지 않습니다.

추천 관련 기사:

HTML로 간단한 등록 페이지 구현(코드 포함)

링크 태그 링크 CSS와 @import 로딩의 차이점은 무엇인가요?

위 내용은 React-JSX에서 클래스와 스타일의 동적 바인딩을 구현하는 방법(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!