React에서 DOM 요소에 어떻게 액세스할 수 있나요?

React에서 DOM 요소에 액세스

React에서 DOM 요소를 가져오는 방법

React에서 DOM 요소에 액세스하는 것은 기존 JavaScript에서 getElementById()를 사용하는 것만큼 간단하지는 않습니다. React는 DOM 조작을 다르게 처리하여 성능과 가상 DOM 비교에 우선순위를 둡니다.

React Refs

React에서 DOM 요소에 액세스하려면 refs를 사용해야 합니다. Refs는 React가 React 구성 요소에 의해 생성된 DOM 요소에 대한 참조를 유지하는 방법입니다. React에서 참조를 생성하는 방법에는 여러 가지가 있습니다:

• 문자열 참조(레거시):
  이전 버전의 React에서는 설정을 통해 문자열 참조를 사용하여 요소에 액세스할 수 있었습니다. ref 속성을 문자열로 변환합니다. 그러나 이 접근 방식은 권장되지 않으며 향후 버전에서는 제거될 수 있습니다.

• 콜백 참조:
  권장되는 접근 방식은 콜백 참조를 사용하는 것입니다. 콜백 참조를 사용하면 콜백 함수를 ref 속성의 값으로 전달합니다. 함수는 DOM 요소를 인수로 받습니다.

  예:

  <progressbar completed="{25}"></progressbar>

• React.createRef(기능 구성 요소):
  React 16.8에 도입된 기능적 구성 요소의 경우 React.createRef()를 사용할 수 있습니다. 이는 속성에 할당할 수 있는 참조 객체를 반환합니다.

  예:

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref="{myRef}" onclick="{handleClick}"></div>;

요소 액세스

ref를 생성한 후에는 다음과 같이 DOM 요소에 액세스할 수 있습니다. 다음:

• 레거시 문자열 참조:
  this.refs.elementName
• 콜백 참조:
  this.elementName
• React.createRef:
  refObject.current

예:

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

특정한 경우에는 콜백 참조를 사용하여 진행률 표시줄 요소에 액세스할 수 있습니다. 그리고 handlerClick10 기능을 수행합니다:

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

위 내용은 React에서 DOM 요소에 어떻게 액세스할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!