집 >웹 프론트엔드 >JS 튜토리얼 >React의 ref에 대한 자세한 설명(자세한 튜토리얼)

React의 ref에 대한 자세한 설명(자세한 튜토리얼)

亚连원래의: 2018-06-05 17:53:441598검색

이 글은 주로 React에서 refs를 사용하는 튜토리얼을 소개하고 있습니다. 이제 공유해서 참고용으로 올려보겠습니다.

ref는 React의 속성입니다. 렌더링 함수가 구성 요소의 인스턴스를 반환하면 다음 코드와 같이 렌더링의 가상 DOM 노드에 ref 속성을 추가할 수 있습니다. 코드에서 렌더링 함수는 하나의 e388a4556c0f65e1904146cc1a846bee 태그만 반환하며 e388a4556c0f65e1904146cc1a846bee 태그의 속성에는 ref 속성이 추가됩니다. 공식 문서에서 ref 속성은 다음과 같이 설명됩니다:

ref 속성

React는 render()에 의해 출력되는 모든 구성 요소에 바인딩하는 데 사용할 수 있는 매우 특별한 속성을 지원합니다. 이 특수 속성을 사용하면 render()에서 반환된 해당 지원 인스턴스를 참조할 수 있습니다. 이렇게 하면 언제든지 항상 올바른 인스턴스를 얻을 수 있습니다.

d5fd7aea971a85678ba271703566ebfd 태그에 ref 속성을 설정하는 목적은 무엇인가요? 다음은 공식 문서에 나와 있는 설명입니다.

다른 코드(일반적으로 이벤트 처리 코드)에서는 this.refs.input과 같이 this.refs를 통해 지원 인스턴스(지원 인스턴스)를 가져옵니다. 그 중 "input"은 위에서 d5fd7aea971a85678ba271703566ebfd 태그에 대해 설정한 ref 속성의 값입니다.

ref 속성을 통해 가상 DOM에 해당하는 실제 DOM 노드를 얻을 수도 있습니다. 다음 코드에 표시된 것처럼 실제 DOM 노드를 얻는 방법에는 두 가지가 있습니다.

<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      render: function() { 
        return ( 
          <p> 
            <input type="text" placeholder="input something..." ref="input" /> 
          </p> 
        ); 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body>

다음은 이를 이해하기 위한 데모입니다. ref 사용:

브라우저에서 실행되는 데모의 효과는 다음과 같습니다.

상단 입력 상자에 1부터 10까지의 숫자를 입력하면 다음 10개 입력 상자의 해당 입력 상자에 focus는 위와 같이 3을 입력하면 바로 아래의 세 번째 입력 상자에 포커스가 오게 됩니다. 여기서는 ref 속성을 사용합니다.

<input type="text" ref="username" /> 
//下面4种方式都可以通过ref获取真实DOM节点 
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs[&#39;username&#39;].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs[&#39;username&#39;]);

렌더링 함수에서는 10개의 입력 상자가 의 본문 부분에 추가됩니다. html 문서의 각 입력 상자에 ref 속성은 모두 ["index" + index]로 설정되어 있으며, 상단 입력 상자의 handlerChange 함수에서 입력된 숫자를 가져와서 ref 속성의 값을 가져온 후 최종적으로 기반으로 합니다. ref 속성 값에서 해당 실제 DOM 노드를 찾은 다음 DOM 노드에 초점을 맞춥니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

React의 ref에 대한 자세한 설명(자세한 튜토리얼)

관련 기사