React 구성 요소 참조를 사용하는 방법

이번에는 React 컴포넌트 ref를 사용하는 방법과 React 컴포넌트 ref를 사용할 때 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

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

사실 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('content')
);

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS가 노드에 새 요소 추가

JS

에서 Nodelist Dom 목록을 반복하는 4가지 방법

위 내용은 React 구성 요소 참조를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!