React 컴포넌트에서 ref를 사용하는 방법

이 글은 주로 React 컴포넌트 ref의 상세한 사용법을 소개하고 있습니다. 이제 참고용으로 공유해보겠습니다.

ref 이름에서 알 수 있듯이 실제로 구성 요소에 대한 참조로 볼 수도 있고 로고라고도 할 수도 있다는 것을 알고 있습니다. 구성요소 속성으로서 해당 속성 값은 문자열 또는 함수일 수 있습니다.

사실 ref를 사용할 필요는 없습니다. 적용 가능한 시나리오에서도 ref를 사용하여 구현한 함수를 다른 메서드로 변환할 수도 있으므로 반드시 그럴 필요는 없습니다. 그러나 ref에는 적용 가능한 시나리오가 있으므로 ref에는 고유한 장점이 있음을 의미합니다. 이것과 ref의 적용 가능한 시나리오와 관련하여 공식 문서에는 다음과 같이 나와 있습니다.

렌더 메소드에서 UI 구조를 반환한 후 React 가상 DOM의 한계를 벗어나서 반환된 구성 요소 인스턴스에서 무언가를 호출할 수 있습니다. 렌더링 방법. 일반적으로 말하면, 이는 애플리케이션의 데이터 흐름에 필요하지 않습니다. 왜냐하면 반응형 데이터 흐름은 항상 최신 prop이 render()의 각 하위 출력에 전달되도록 보장하기 때문입니다. 그러나 이 접근 방식을 사용하는 것이 필요하거나 유익한 여러 시나리오가 여전히 있습니다. 렌더링된 구성 요소의 DOM 마크업(DOM 식별 ID로 생각할 수 있음) 찾기, 대규모 비 React 애플리케이션에서 React 구성 요소 사용 또는 변환 기존 코드를 React로 변환합니다.

이러한 시나리오를 살펴보겠습니다(다음 예는 ref를 설명하는 데 자주 사용되므로 아래 설명된 시나리오가 더 고전적임을 알 수 있습니다). 이벤트를 통해 빈 문자열이 있으면 요소가 포커스를 받습니다.

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

위의 예에서는 버튼을 클릭하여 입력 요소에 값을 빈 문자열로 설정하도록 알리도록 구현했지만 포커스를 얻기 위한 입력 요소는 아직 구현하지 않았습니다. render()에서 반환되는 내용은 하위 구성 요소의 실제 조합이 아니라 특정 시간의 특정 인스턴스에 대한 설명일 뿐이므로 구현하기가 약간 어렵습니다. 사실 이 문장은 상당히 혼란스럽게 느껴집니다. render는 실제 DOM이 아닌 가상 DOM을 반환합니다. 따라서 우리는 render()에서 반환된 구성 요소에만 집중할 필요가 없습니다.

말하자면, 집중력을 얻는 방법에는 별로 도움이 되지 않습니다. 포커스를 얻는 기능을 달성하려면 ref를 사용해야 합니다. 위에서 ref 값에는 두 가지 유형이 있다고 언급했는데, 하나는 문자열이고 다른 하나는 콜백 함수입니다.

ref 문자열 속성

React는 render()에서 반환된 모든 구성 요소에 추가할 수 있는 특수 속성을 지원합니다. 이는 render()에 의해 반환된 구성 요소가 표시되어 구성 요소 인스턴스를 쉽게 찾을 수 있음을 의미합니다. 이것이 심판의 목적입니다.

ref 형식은 다음과 같습니다

<input ref="myInput" />

이 인스턴스에 액세스하려면 this.refs를 통해 액세스할 수 있습니다.

this.refs.myInput

이전 버전에서는 React.findDOMNode(this.refs.myInput)를 통해 구성 요소의 DOM에 액세스할 수 있었습니다. . 그러나 이제 findDOMNode 함수는 폐기되었으며 this.refs.myInput을 사용하여 직접 액세스할 수 있습니다.

ref 콜백 함수

ref 속성은 이름 대신 콜백 함수일 수도 있습니다. 이 함수는 컴포넌트가 마운트된 후 즉시 실행됩니다. 참조된 구성요소는 함수에 대한 매개변수로 사용되며, 구성요소 매개변수를 즉시 사용하거나 나중에 사용하기 위해 저장할 수 있습니다.

양식도 상대적으로 간단합니다.

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

또는

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

참조 구성 요소가 제거되고 참조가 변경되면 이전 참조의 매개 변수 값은 null이 됩니다. 이렇게 하면 메모리 누수를 효과적으로 방지할 수 있습니다. 따라서 위 코드에는 if 판단이 있을 것입니다.

if(input != null){
     input.focus();
}

위에 ref의 사용 시나리오와 방법이 소개되었습니다. 이제 포커스를 얻는 기능을 달성하기 위해 위의 예를 완성하겠습니다

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById(&#39;content&#39;)
);

이 예에서는 렌더링 기능이 있습니다. 인스턴스에 대한 설명을 반환합니다. 그러나 실제 인스턴스는 this.refs.myTextInput을 통해 얻습니다. render에서 반환된 하위 구성 요소에 ref="myTextInput"이 있는 한 this.refs.myTextInput은 올바른 인스턴스를 가져옵니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue-cli+webpack 프로젝트를 통해 프로젝트 이름을 수정하는 방법

vue 구성 요소에서 전역 등록 및 로컬 등록을 구현하는 방법

vue에서 사용자 정의 전역 메서드를 구현하는 방법

위 내용은 React 컴포넌트에서 ref를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!