logo

TechCodeview

반응 참조

Refs는 다음의 약어입니다. 참고자료 반응에서. 그것은 비슷하다 열쇠 반응에서. 특정 DOM 노드나 React 요소에 대한 참조를 저장할 수 있게 해주는 속성입니다. React DOM 노드 또는 React 요소에 액세스하는 방법과 상호 작용하는 방법을 제공합니다. props를 사용하지 않고 자식 컴포넌트의 값을 변경하고 싶을 때 사용됩니다.

Refs를 사용해야 하는 경우

Refs는 다음과 같은 경우에 사용할 수 있습니다.

  • 포커스 관리, 텍스트 선택 또는 미디어 재생과 같은 DOM 측정이 필요한 경우.
  • 명령형 애니메이션을 트리거하는 데 사용됩니다.
  • 타사 DOM 라이브러리와 통합하는 경우.
  • 콜백에서와 같이 사용할 수도 있습니다.

Refs를 사용하지 말아야 할 경우

  • 수행할 수 있는 모든 작업에는 사용을 피해야 합니다. 선언적으로 . 예를 들어, 열려 있는() 그리고 닫다() Dialog 구성 요소의 메소드를 전달하려면 열려 있음 그것에 버팀목.
  • Refs의 남용을 피해야 합니다.

Ref를 만드는 방법

React에서는 다음을 사용하여 Ref를 생성할 수 있습니다. React.createRef() . 이는 다음을 통해 React 요소에 할당될 수 있습니다. 심판 기인하다. 이는 일반적으로 구성 요소가 생성될 때 인스턴스 속성에 할당된 다음 구성 요소 전체에서 참조될 수 있습니다.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

Refs에 액세스하는 방법

React에서 ref가 render 메서드 내부의 요소에 전달되면 ref의 현재 속성을 통해 노드에 대한 참조에 액세스할 수 있습니다.

 const node = this.callRef.current;

현재 속성 참조

ref 값은 노드 유형에 따라 다릅니다.

  • ref 속성이 HTML 요소에 사용되면 ref는 다음과 같이 생성됩니다. React.createRef() 기본 DOM 요소를 해당 요소로 받습니다. 현재의 재산.
  • ref 속성이 사용자 정의 클래스 구성 요소에 사용되면 ref 객체는 탑재 구성 요소의 인스턴스를 현재 속성으로 사용합니다.
  • ref 속성은 다음에서 사용할 수 없습니다. 기능 구성 요소 왜냐하면 인스턴스가 없기 때문입니다.

DOM 요소에 Ref 추가

아래 예에서는 DOM 노드 또는 요소에 대한 참조를 저장하기 위해 참조를 추가합니다.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

산출

반응 참조

클래스 구성 요소에 참조 추가

아래 예에서는 클래스 구성 요소에 대한 참조를 저장하기 위해 참조를 추가합니다.

예

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

산출

반응 참조

콜백 참조

이에 대응하여 ''라는 심판을 사용하는 또 다른 방법이 있습니다. 콜백 참조 ' 그리고 심판이 있을 때 더 많은 제어권을 제공합니다. 세트 그리고 설정되지 않음 . React에서는 createRef() 메소드로 ref를 생성하는 대신 컴포넌트의 ref 속성에 콜백 함수를 전달하여 ref를 생성하는 방법을 허용합니다. 아래 코드와 같습니다.

 this.callRefInput = element} /&gt;

콜백 함수는 인스턴스 속성에 DOM 노드에 대한 참조를 저장하는 데 사용되며 다른 곳에서 액세스할 수 있습니다. 아래와 같이 접근 가능합니다:

 this.callRefInput.value

아래 예는 콜백 참조의 작동을 이해하는 데 도움이 됩니다.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

위의 예에서 React는 'ref' 콜백을 호출하여 구성 요소가 입력될 때 입력 DOM 요소에 대한 참조를 저장합니다. 마운트 , 그리고 구성 요소가 마운트 해제 , 다음으로 전화하세요 없는 . 심판은 언제나 최신 정보 전에 컴포넌트DidMount 또는 컴포넌트DidUpdate 화재. 구성요소 간 콜백 참조 전달은 React.createRef()로 생성된 객체 참조로 작업할 수 있는 것과 동일합니다.

산출

반응 참조

한 구성요소에서 다른 구성요소로 Ref 전달

참조 전달(Ref Forwarding)은 정보를 전달하는 데 사용되는 기술입니다. 심판 구성 요소를 통해 해당 하위 구성 요소 중 하나로 연결됩니다. 을 활용하여 수행할 수 있습니다. React.forwardRef() 방법. 이 기술은 다음과 같은 경우에 특히 유용합니다. 고차 성분 재사용 가능한 구성 요소 라이브러리에 특별히 사용됩니다. 가장 일반적인 예는 다음과 같습니다.

예

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

위의 예에는 구성요소가 있습니다. 텍스트 입력 입력 필드로 자식이 있는 것입니다. 이제 전달하거나 전달하려면 심판 입력까지 먼저 참조를 만든 다음 참조를 아래로 전달합니다. . 그 후 React는 참조를 다음으로 전달합니다. 앞으로Ref 두 번째 인수로 작동합니다. 다음으로, 이 ref 인수를 아래로 전달합니다. . 이제 DOM 노드의 값은 다음에서 액세스할 수 있습니다. 입력기준전류 .

useRef()로 반응

에 소개되어 있습니다. 16.7 반응 그리고 위 버전. DOM 노드나 요소에 액세스하는 데 도움이 되며 입력 요소에 초점을 맞추거나 입력 요소 값에 액세스하는 등 해당 DOM 노드나 요소와 상호 작용할 수 있습니다. ref 객체를 반환합니다. .현재의 전달된 인수로 초기화된 속성입니다. 반환된 개체는 구성 요소의 수명 동안 유지됩니다.

통사론

 const refContainer = useRef(initialValue);

예

아래 코드에서, useRef 변수에 할당되는 함수입니다. 입력 참조 , 참조하려는 HTML 요소 내의 ref라는 속성에 첨부됩니다.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }