this.refs를 사용한 권장 해제 경고

this.refs를 사용한 권장 해제 경고

React 컴포넌트가 있는데 클릭하면 css 클래스를 전환합니다.

자, 여기 있습니다.

export class myComponent extends React.Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div>
        <div onClick={this.clicked}><span ref="btn" className="glyphicon">&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.refs.btn.classList.toggle('active');
  }

  componentDidMount() {
    this.refs.btn.addEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = true,
    });
  }

  componentWillUnmount() {
    this.refs.btn.removeEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = false,
    });
  }
}

이 문제는 ESLint에서 "this.refs"가 감가상각되었다고 계속 말하고 있다는 것입니다.

내가 대신 뭘 해야 하지?감가상각 코드를 사용하지 않도록 수정하려면 어떻게 해야 하나요?

참조하고 있는 린트규칙은 no-string-refs라고 불리며 다음과 같이 경고합니다.

"Using string literals in ref attributes is deprecated (react/no-string-refs)"

이 경고는 권장되지 않는 사용 방법을 구현했기 때문에 발생합니다.refs(문자열 사용).React 버전에 따라 다음 작업을 수행할 수 있습니다.

16.3 이후 대응

constructor() {
  super();
  this.btnRef= React.createRef();
  this.state = { clicked: false };
  this.handleClick = this.handleClick.bind(this);
}

render() {
  return (
    <div>
      <div onClick={this.addVote}><span ref={this.btnRef} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

---

16.2 이전 버전부터 대응

constructor() {
  super();
  this.btnRef;  //not necessary to declare the variable here, but I like to make it more visible.
  this.state = { clicked: false };
  this.handleClick = this.handleClick.bind(this);
}

render() {
  return (
    <div>
      <div onClick={this.addVote}><span ref={(el) => this.btnRef = el} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

보다 읽기 쉽게 하기 위해 다음 작업을 수행할 수도 있습니다.

render() {
  let myRef = (el) => this.btnRef = el;
  return (
    <div>
      <div onClick={this.addVote}><span ref={myRef} className="glyphicon">&nbsp;</span></div>
    </div>
  );
}

---

Refs 및 DOM에 관한 공식 문서, 특히 이 섹션을 참조하십시오.

레거시 API: 문자열 참조

이전에 React와 함께 작업했다면 이전 API에 익숙할 것입니다.refattribute는 문자열입니다."textInput"DOM 노드는 다음과 같이 액세스 됩니다.this.refs.textInputstring ref는 몇 가지 문제가 있어 레거시라고 간주되며 향후 출시에서 삭제될 가능성이 높기 때문에 권장하지 않습니다.현재 사용 중인 경우this.refs.textInput참조에 액세스 하려면 , 대신에 콜백 패턴을 추천합니다.

이 ESLint 규칙이 존재하는 이유는 문자열 참조가 전송 중이기 때문입니다.단, 위의 코드는 Ref를 사용하지 않는 것이 좋습니다.

참고문헌을 남용하지 말 것

리액트의 장점은 선언적이라는 것이다.즉, 상태 및 UI(더 정확히는 DOM)가 특정 상태로 표시되는 방법에 대한 식(반환된 JSX)이 있습니다.

상태 표현식 및 UI 표현식만 사용하여 수행할 수 있는 모든 작업은 다음과 같이 수행해야 합니다.위의 코드에서 Ref를 사용할 때의 문제는 코드가 필수적이 된다는 것입니다.JSX에서만 보면 DOM이 어떻게 보이는지 알 수 없습니다.선언적인 방법으로 같은 결과를 얻을 수 있는 방법은 다음과 같습니다.

export class myComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            active: false 
        };
    }

    handleClick = () => {  // with arrow function there is no need for binding. 
        this.setState(
            prevState => {
                return {
                    active: !prevState.active
                }
            }
        )
    }

    render() {
        return (
            <div>
                <span 
                    onClick={this.handleClick} 
                    className={`glyphicon ${this.state.active && "active"}`}
                >
                    Hello World
                </span>
            </div>
        );
    }

}

상태 및 UI 식이 충분하지 않고 실제 DOM에 액세스해야 할 경우 참조를 사용해야 합니다.예를 들어 입력 필드에 초점을 맞추거나 요소로 스크롤하거나 요소의 정확한 폭과 높이를 얻는 것입니다.

참조를 사용하는 경우 문자열 참조를 사용하지 마십시오.

string refs는 퍼포먼스를 해치고 컴포넌트 할 수 없기 때문에 처리되지 않습니다.

string ref에는 몇 가지 문제가 있으며 레거시라고 간주되며 향후 출시 중 하나에서 삭제될 가능성이 있습니다.[공식 리액트 문서]

[resource1] [1], [resource2][1]

옵션 1: React.createRef 사용

class MyComponent extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef() // create a ref object 
    }

    render() {
        return <div ref={this.myRef}></div> // Attach the ref property to a dom element
    }

}

옵션 2: 참조 콜백 사용

class MyComponent extends Component {

    constructor(props){    // Optional, declare a class field
        super(props)
        this.myRef=null    
    }

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    }   // Attach the dom element to a class field

}

좀 더 선언적인 방법을 시도해 보세요.이것을 반영하기 위해 당신의 코드를 변경했습니다.상태/프로포스가 변경될 때마다 컴포넌트가 새로 고쳐져 렌더링을 호출한다는 것만 알려주면 됩니다.따라서 렌더 메서드 내에 요소의 클래스를 만들 수 있습니다.

import React from 'react'

export default class myComponent extends React.Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    let btnClass = 'glyphicon'
    if(this.state.clicked){
      btnClass+=' active'
    }
    return (
      <div>
        <div onClick={this.handleClick}><span ref="btn" className={btnClass}>&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.setState({
      clicked: !this.state.clicked
    })
  }
}

언급URL : https://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs