`document.getElementById()`를 사용하지 않고 React에서 DOM 요소에 어떻게 액세스합니까?

React에서 DOM 요소에 어떻게 접근하나요? React에서 document.getElementById()와 동등한 것은 무엇입니까?

React에서 DOM 요소에 액세스하는 것은 바닐라 JavaScript의 기존 document.getElementById() 메서드와 다릅니다. React는 DOM 요소를 선택하기 위한 여러 가지 접근 방식을 제공합니다.

React Refs

Ref를 사용하면 React 구성 요소 내에서 DOM 요소에 대한 참조를 생성할 수 있습니다. 이 참조는 나중에 DOM 노드에 액세스하는 데 사용될 수 있습니다.

콜백 패턴(권장)

React 16.2 이하에서는 ref를 사용하는 권장 방법은 콜백 패턴을 사용하는 것입니다.

<Progressbar completed={25}>

이것은 DOM 노드를 인수로 수신하고 이를 구성 요소의 Progress 배열에 할당하는 콜백 함수를 생성합니다. state.

문자열 참조

문자열 참조는 레거시로 간주되므로 사용하지 않는 것이 좋습니다. 그러나 이전 버전의 React에서는 계속 사용할 수 있습니다.

<Progressbar completed={25}>

DOM 요소에 액세스하려면 다음을 사용하세요.

var object = this.refs.Progress1;

문자열 참조는 향후 릴리스에서 제거될 수 있습니다. React.

React.createRef()

React 16.3 이상에서는 다음을 사용합니다. React.createRef()를 사용하여 참조를 만듭니다.

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

DOM 요소에 액세스하려면 다음을 사용합니다.

const node = this.myRef.current;

React Hook: useRef

함수 구성 요소( React 16.8에서 도입됨), useRef 후크를 사용하여 ref.

const childRef = useRef(null);
return <div ref={childRef} />;

DOM 요소에 액세스하려면 다음을 사용하세요.

const node = childRef.current;

이러한 방법을 사용하면 React 구성 요소 내의 DOM 요소에 액세스하고 조작할 수 있으므로 DOM 요소에 대한 보다 세부적인 제어가 가능합니다. 웹 애플리케이션의 상호 작용 및 기능.

위 내용은 `document.getElementById()`를 사용하지 않고 React에서 DOM 요소에 어떻게 액세스합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!