React에서 DOM 요소를 선택하는 방법: `document.getElementById()`의 대안?

React에서 DOM 요소를 선택하는 방법은 무엇입니까? React의 document.getElementById()와 동등한 것은 무엇입니까

React에서는 바닐라 JavaScript로 작업하는 것과 달리 DOM 요소에 직접 액세스하는 것이 다릅니다. React는 가상 DOM을 사용하여 실제 DOM을 효율적으로 업데이트하므로 바닐라 JavaScript와 다릅니다.

DOM 요소에 액세스하는 방법

옵션 1: Refs 사용

• 함수 구성요소와 함께 Refs 사용:(v16.8.0) 사용 useRef 및 전달Ref. useRef로 ref를 정의한 다음 이를 전달Ref를 사용하여 DOM 요소로 전달합니다. 요소에 액세스하려면 ref(ref.current)의 현재 속성을 사용하세요.

옵션 2: React.createRef 사용(v16.3 )

• React.createRef()를 사용하여 참조를 생성하고 나중에 액세스할 수 있도록 요소에 첨부하세요. ref.current를 사용하여 DOM 노드를 가져옵니다.

옵션 3: 콜백 패턴 사용(레거시)

• JSX에서 ref 속성 정의 요소를 작성하고 DOM에 대한 참조를 수신하는 콜백 함수를 전달합니다. element.

옵션 4: 문자열 참조 사용(레거시)

• ref 속성을 DOM 요소를 식별하는 문자열로 설정하여 문자열 참조를 사용합니다. . this.refs.[stringRef]를 사용하여 요소에 액세스합니다.

예

다음은 콜백 패턴을 사용하여 DOM 요소를 선택하는 예입니다.

  render() {
    return (
      <div>
        <Progressbar
          completed={25}
         >

요소에 액세스하려면 this.progressBars[0], this.progressBars[1] 및 this.progressBars[2]에 대한 작업을 수행합니다.

위 내용은 React에서 DOM 요소를 선택하는 방법: `document.getElementById()`의 대안?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!