最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】[eslint] Using this.refs is deprecated (react/no-string-refs)

ReactJS crifan 7706浏览 0评论

之前:

【已解决】运行spring-picker的demo中出现警告:Warning string refs are not supported on children of TransitionGroup

已经知道,最新React中不建议用refs了:

[eslint] Using this.refs is deprecated. (react/no-string-refs)

然后此处参考别人的代码:

  componentDidUpdate () {
    if (this.refs.modalOverlay && !this.refs.modalOverlay.onclick) {
      // 点击阴影背景时cancel() popup
      this.refs.modalOverlay.onclick = (e) => {
        e.stopPropagation();
        this.props.onCancel && this.props.onCancel();
      }
      // 点击modal阻止默认行为
      // 原理:react event listener中无法阻止原生事件,所以用原生事件来替代react事件
      this.refs.modal.onclick = (e) => e.stopPropagation();
    }
  }
  render () {
    let modal = null;
    if (this.props.visible) {
      modal = (
        <div class={style.modal_overlay} ref="modalOverlay">
          <div className="modal" ref="modal">
            {this.props.children}
          </div>
        </div>
      );
    }

springalskey/picker: react mobile picker选择器,一级、二级联动,三级联动城市选择器

所以要去把旧的refs改为新的写法

[eslint] Using this.refs is deprecated. (react/no-string-refs)

eslint-plugin-react/no-string-refs.md at master · yannickcr/eslint-plugin-react

‘Using this.refs is deprecated. (react/no-string-refs)’ source: ‘eslint’ · Issue #3 · drcmda/react-springy-parallax

Update description on no-string-refs · Issue #739 · yannickcr/eslint-plugin-react

update no-string-refs.md? · Issue #393 · yannickcr/eslint-plugin-react

reactjs – Why ref=’string’ is "legacy"? – Stack Overflow

測試、react/no-string-refs ( lint ) | 小助助的精神實驗室

【总结】

相关代码改为:

       <div class={style.modal_overlay} ref={(mol) => {this.modalOverlay = mol;}}>
        <div class={style.modal} ref={(m) => {this.modal = m;}}>

然后别处的调用:

  if (this.modalOverlay && !this.modalOverlay.onclick) {
     // 点击阴影背景时cancel() popup
     this.modalOverlay.onclick = (e) => {
       e.stopPropagation();
      this.props.onCancel && this.props.onCancel();
 };

即可。

【后记】

经过后来的优化,此处的代码的逻辑可以写成:

import { h, Component } from ‘preact’;
import ReactCSSTransitionGroup from ‘react-addons-css-transition-group’;
import style from ‘./style.less’;
export default class BaseModal extends Component {
  // state = {
  //   isVisible : false
  // }
  constructor(props) {
    super(props);
  }
  // componentWillReceiveProps(nextProps) {
  //   this.setState({
  //     isVisible: nextProps.visible
  //   });
  //   console.log(`BaseModal componentWillReceiveProps: nextProps.visible=${nextProps.visible}, this.state.isVisible=${this.state.isVisible}`);
  // }
  // componentDidUpdate() {
  //   console.log(`BaseModal componentDidUpdate: this.modalOverlay=${this.modalOverlay}`);
  //   if (this.modalOverlay && !this.modalOverlay.onclick) {
  //     // 点击阴影背景时cancel() popup
  //     this.modalOverlay.onclick = (e) => {
  //       e.stopPropagation();
  //       this.props.onCancel && this.props.onCancel();
  //     };
  //     // 点击modal阻止默认行为
  //     // 原理:react event listener中无法阻止原生事件,所以用原生事件来替代react事件
  //     this.modal.onclick = (e) => e.stopPropagation();
  //   }
  // }
        // <div class={style.modal_overlay} ref={(mol) => {this.modalOverlay = mol;}}>
        //   <div class={style.modal} ref={(m) => {this.modal = m;}}>
        // <div class={style.modal_overlay} onClick={this.props.onCancel}>
        //   <div class={style.modal} onClick={this.props.onCancel}>
  render () {
    let modal = null;
    // if (this.state.isVisible) {
    if (this.props.visible) {
      modal = (
        <div class={style.modal_overlay} onClick={this.props.onCancel}>
          <div class={style.modal}>
            {this.props.children}
          </div>
        </div>
      );
    }
    return (
      <ReactCSSTransitionGroup
        transitionName="modal-transition"
        transitionEnterTimeout={120}
        transitionLeaveTimeout={120}>
        { modal }
      </ReactCSSTransitionGroup>
    );
  }
}

即可。

转载请注明:在路上 » 【已解决】[eslint] Using this.refs is deprecated (react/no-string-refs)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.797 seconds, using 22.14MB memory