className을 추가하기 위한 React Ref

안녕하세요 React 개발자 여러분! 정말 멋진 예제를 사용하여 className을 동적으로 추가하는 방법을 알고 싶습니까? 그렇다면 당신은 바로 이곳에 있습니다. 게시물을 통해 심층적으로 이해하십시오.

반응이란 무엇입니까?

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
자세한 내용을 보려면 here을 클릭하십시오.

반응 참조는 무엇입니까?

Refs는 render 메서드에서 생성된 DOM 노드 또는 React 요소에 액세스하는 방법을 제공합니다.
자세한 내용을 보려면 here을 클릭하십시오.

지도 기능을 사용하여 버튼 목록을 만드는 예를 살펴보겠습니다.

const buttonsArray = ['Button 1', 'Button 2' , 'Button 3']
buttonsArray.map((button)=>{
      return(
   <button>{button}</button>
   )
 }
)

이제 버튼 목록에 대한 참조를 만들어 봅시다. 심판을 "콜백 심판"으로 생성했습니다.

const buttonsArray = ['Button 1', 'Button 2' , 'Button 3']
buttonsArray.map((button,index)=>{
    return(
    <button ref={a => this.buttonElement[index] = a} >{button}</button>
  )
 }
)

이와 함께 생성자 내부에 "this.buttonElement"를 선언해야 합니다.

 constructor(props) {
    super(props);
    this.buttonElement = [];
  };

이제 마법을 시작합니다. 필요한 CSS를 모두 작성했다고 가정해 보겠습니다. 버튼 목록에서 페이지 로딩 시 첫 번째 버튼이 활성화되기를 원합니다. 그것을 만드는 방법? 아래 코드를 확인하십시오 ...
"활성"을 고려하면 CSS className입니다.

   componentDidMount() {
    this.buttonElement[0].className = this.buttonElement[0].className+"active";
  }

3개의 버튼 모두에 대해 서로 다른 스타일을 추가할 수도 있습니다...

   componentDidMount() {
    this.buttonElement[0].className = this.buttonElement[0].className+"active";
    this.buttonElement[1].className = this.buttonElement[1].className+"foo";
    this.buttonElement[2].className = this.buttonElement[2].className+"bar";
  }

설명:

'this.buttonElement'는 버튼 목록이므로 첫 번째 요소를 활성화하기 위해 index=0 요소에 'active' className을 추가했습니다.

추가의:

첫 번째 버튼에 클릭 이벤트를 만들 수도 있습니다.

   componentDidMount() {
    this.buttonElement.click();
  }

위의 코드가 필요한 경우 className을 추가할 필요가 없습니다. 클릭 이벤트가 버튼을 활성화하고 CSS가 해당 조건을 처리하기 때문입니다.

여기서는 코드 스니펫을 이해할 수 있도록 버튼을 사용하여 구현했습니다. 모든 HTML 요소 또는 모든 이벤트를 사용할 수 있습니다.

감사합니다,