상위 컴포넌트를 통해 하위 컴포넌트에 클래스 이름을 전달하는 React의 자세한 예

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다. 이번 글에서는 주로 React가 부모 컴포넌트를 통해 자식 컴포넌트에 클래스 이름을 전달하는 방법을 소개하는데, 필요한 친구들이 참고하면 도움이 될 것 같습니다.

React 튜토리얼

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.
React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React가 MVC의 V(뷰)라고 생각합니다.
React는 Facebook 내부 프로젝트로 시작되었으며 Instagram 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.
React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 주목하고 사용하기 시작했습니다.

React의 특징

1. 선언적 디자인 −React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.
2. 효율성 −React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
3. 유연성 −React는 알려진 라이브러리 또는 프레임워크와 잘 작동합니다.
4.JSX - JSX는 JavaScript 구문의 확장입니다. JSX는 React 개발에 필수는 아니지만 권장됩니다.
5. 컴포넌트 - React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.
6. 단방향 응답 데이터 흐름 - React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄이므로 기존 데이터 바인딩보다 간단합니다.

1. 상위 컴포넌트를 통해 하위 컴포넌트에 클래스 이름을 전달하는 방법(라인 19)

2. 다양한 상태 값을 통해 특정 클래스 이름을 적용합니다. ​​​​(라인 22)

 import React from 'react'
import './style.css'
class PageTitle extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      timeType:0
    }
  }
  handleClick(timeType){
    this.setState({
      timeType:timeType
    });
    this.props.handle(timeType+1);
  }
  render() {
    const {title,dataList} = this.props;
    return (
     <h3 className={this.props.clasName+" cp_title"}>{title}
       <p className="floatR">
         {dataList.map((item,index) => {
           return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

모두가 이 기사를 완료해야 합니다. 지식을 더 깊이.

관련 권장 사항:

React 제어 구성 요소와 비제어 구성 요소에 대한 자세한 설명

React에서 구성 요소를 작성하는 방법

ReactJS에서 단일 선택, 다중 선택 및 역선택 양식을 구현하는 방법

위 내용은 상위 컴포넌트를 통해 하위 컴포넌트에 클래스 이름을 전달하는 React의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!