React 컴포넌트 참조의 용도는 무엇입니까? 반응 구성 요소 참조의 역할과 사용법에 대한 자세한 설명

이 글에서는 주로 react 컴포넌트 참조에 대한 자세한 설명을 설명합니다. 이제

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: ''};
},
handlerChange: function(e) {
this.setState({userInput: e.target.value });
                                                                                                     () {
          반환 (
                                                                          ~                                                               Reset And Focus"
위의 예에서는 버튼을 클릭하여 값을 설정하라는 입력 요소에 빈 문자열임을 알리는 구현을 구현했지만 아직 구현되지 않았습니다. 입력 요소가 포커스를 얻도록 허용합니다. render()에서 반환되는 내용은 하위 구성 요소의 실제 조합이 아니라 특정 시간의 특정 인스턴스에 대한 설명일 뿐이므로 구현하기가 다소 어렵습니다. 사실 이 문장은 꽤 혼란스러워 보입니다. 렌더링이 반환하는 것은 실제 DOM이 아닌

가상 DOM

입니다. 따라서 우리는 render()에서 반환된 구성 요소에만 집중할 필요가 없습니다.

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


ref 문자열 속성

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

ref는 다음 형식입니다

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

this.refs.myInput

이전 버전에서는 React.findDOMNode(this.refs.myInput)를 통해 구성 요소의 DOM에 액세스할 수 있습니다. 그러나 이제 findDOMNode 함수는 폐기되었으며 this.refs.myInput을 사용하여 직접 액세스할 수 있습니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트React Reference Manual 열을 참조하세요.)

ref 콜백 함수

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

양식도 비교적 간단합니다.

render: function() {
return this._input = c} } />;
},
comComponentDidMount: function( ) {
this._input.focus();
},

또는

render: function() {
return (
) ref={function(input) {
if (input != null) { + .초점(); 이렇게 하면 메모리 누수를 효과적으로 방지할 수 있습니다. 따라서 위 코드에서는 if 판단이 나옵니다.
input.focus ()
}

} 위에서 REF의 사용 시나리오와 방법을 소개하여 다음과 같은 기능을 수행합니다.

얻기

var App = React.createClass({
    getInitialState: function() {
        return {userInput: ''};
    },
    handlerChange: function(e) {
        this.setState({userInput: e.target.value} );
    },
   clearAndFocusInput: function() {
        this.setState({userInput: ''}); // 입력을 지우세요
        // 지금 <입력 />에 초점을 맞추고 싶습니다! .refs.myTextInput !== null) {
            this.refs.myTextInput.focus();
        }
    },
    render: function() {
        return (
           

                                 값={this .state.userInput}
                   onChange={this.handleChange}
                 ref="myTextInput"      
                                   />
                                 type="button"
                 value="재설정 및 초점"
                   onClick={this.clearAndFocusInput}
/>