Refs를 사용하여 특정 React 요소를 직접 조작하는 방법은 무엇입니까?

특정 React 요소에서 작업을 실행하는 방법

React에서 DOM 요소를 작업할 때 특정 요소를 선택하고 작업해야 하는 경우가 많습니다. 사용자 인터페이스를 조작합니다. 이 경우 목표는 사용자의 선택에 따라 진행률 표시줄 구성 요소를 업데이트하는 것입니다.

Ref를 사용하도록 코드 리팩터링

React에서 DOM 요소에 액세스하려면 " 심판." Refs는 구성 요소 트리의 특정 요소에 대한 참조를 생성하여 해당 속성과 메서드에 직접 액세스할 수 있는 메커니즘을 제공합니다.

React 16.8(함수 구성 요소):

// Define the ref for the child component
const ChildRef = useRef(null);

// Forward the ref to the child component with React.forwardRef()
const Child = React.forwardRef((props, ref) => {
  // Receive and store the forwarded ref in useRef()
  ChildRef.current = ref;
  
  return <div>Child Component</div>;
});

React 16.3(클래스 구성 요소):

// Create a ref for the component instance
this.myRef = React.createRef();

// Pass the ref to the element within the render method
render() {
  return <div ref={this.myRef} />;
}

참조 요소에 액세스:

참조가 설정되면 다음을 사용하여 DOM 요소에 액세스할 수 있습니다:

const element = this.myRef.current;

선택한 요소에 대한 작업 수행

원하는 요소에 액세스하면 이제 필요한 작업을 수행할 수 있습니다. 귀하의 경우 addPrecent 함수를 실행하여 진행률 표시줄의 완료율을 업데이트하려고 합니다.

document.getElementById(this.state.baction).addPrecent(10);

레거시 메서드(권장하지 않음)

DOM 요소에 액세스하기 위한 레거시 메서드에는 문자열 참조 사용이 포함됩니다. 또는 콜백 참조:

문자열 참조:

<Progressbar completed={25}>

콜백 참조:

<Progressbar completed={25}>

그러나 이러한 방법은 잠재적인 문제로 인해 권장되지 않으며 향후 제거될 가능성이 높습니다. React 버전.

refs를 통합하면 특정 DOM을 효과적으로 선택하고 조작할 수 있습니다. 요소를 사용하여 React 애플리케이션의 상호작용성과 유연성을 향상합니다.

위 내용은 Refs를 사용하여 특정 React 요소를 직접 조작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!