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

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

ReactJS crifan 2218浏览 0评论

折腾:

【未解决】Preact中用spring-picker去实现弹框选择

期间,运行spring-picker的demo时出现警告:

browser.js?26d3:49 Warning: string refs are not supported on children of TransitionGroup and will be ignored. Please use a callback ref instead: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute
warning    @    browser.js?26d3:49
_loop    @    TransitionGroup.js?5121:218
render    @    TransitionGroup.js?5121:241
(anonymous)    @    ReactCompositeComponent.js?d2b3:795
measureLifeCyclePerf    @    ReactCompositeComponent.js?d2b3:75
_renderValidatedComponentWithoutOwnerOrContext    @    ReactCompositeComponent.js?d2b3:794
_renderValidatedComponent    @    ReactCompositeComponent.js?d2b3:821
_updateRenderedComponent    @    ReactCompositeComponent.js?d2b3:745
_performComponentUpdate    @    ReactCompositeComponent.js?d2b3:723
updateComponent    @    ReactCompositeComponent.js?d2b3:644
receiveComponent    @    ReactCompositeComponent.js?d2b3:546
receiveComponent    @    ReactReconciler.js?399b:124
_updateRenderedComponent    @    ReactCompositeComponent.js?d2b3:753
_performComponentUpdate    @    ReactCompositeComponent.js?d2b3:723
updateComponent    @    ReactCompositeComponent.js?d2b3:644
receiveComponent    @    ReactCompositeComponent.js?d2b3:546
receiveComponent    @    ReactReconciler.js?399b:124
_updateRenderedComponent    @    ReactCompositeComponent.js?d2b3:753
_performComponentUpdate    @    ReactCompositeComponent.js?d2b3:723
updateComponent    @    ReactCompositeComponent.js?d2b3:644
receiveComponent    @    ReactCompositeComponent.js?d2b3:546
receiveComponent    @    ReactReconciler.js?399b:124
_updateRenderedComponent    @    ReactCompositeComponent.js?d2b3:753
_performComponentUpdate    @    ReactCompositeComponent.js?d2b3:723
updateComponent    @    ReactCompositeComponent.js?d2b3:644
receiveComponent    @    ReactCompositeComponent.js?d2b3:546
receiveComponent    @    ReactReconciler.js?399b:124
updateChildren    @    ReactChildReconciler.js?dd13:109
_reconcilerUpdateChildren    @    ReactMultiChild.js?9682:206
_updateChildren    @    ReactMultiChild.js?9682:310
updateChildren    @    ReactMultiChild.js?9682:297
_updateDOMChildren    @    ReactDOMComponent.js?ab8a:942
updateComponent    @    ReactDOMComponent.js?ab8a:760
receiveComponent    @    ReactDOMComponent.js?ab8a:722
receiveComponent    @    ReactReconciler.js?399b:124
updateChildren    @    ReactChildReconciler.js?dd13:109
_reconcilerUpdateChildren    @    ReactMultiChild.js?9682:206
_updateChildren    @    ReactMultiChild.js?9682:310
updateChildren    @    ReactMultiChild.js?9682:297
_updateDOMChildren    @    ReactDOMComponent.js?ab8a:942
updateComponent    @    ReactDOMComponent.js?ab8a:760
receiveComponent    @    ReactDOMComponent.js?ab8a:722
receiveComponent    @    ReactReconciler.js?399b:124
_updateRenderedComponent    @    ReactCompositeComponent.js?d2b3:753
_performComponentUpdate    @    ReactCompositeComponent.js?d2b3:723
updateComponent    @    ReactCompositeComponent.js?d2b3:644
performUpdateIfNecessary    @    ReactCompositeComponent.js?d2b3:560
performUpdateIfNecessary    @    ReactReconciler.js?399b:156
runBatchedUpdates    @    ReactUpdates.js?8e6b:150
perform    @    Transaction.js?f15f:143
perform    @    Transaction.js?f15f:143
perform    @    ReactUpdates.js?8e6b:89
flushBatchedUpdates    @    ReactUpdates.js?8e6b:172
close    @    ReactUpdates.js?8e6b:47
closeAll    @    Transaction.js?f15f:209
perform    @    Transaction.js?f15f:156
perform    @    ReactUpdates.js?8e6b:89
flushBatchedUpdates    @    ReactUpdates.js?8e6b:172
closeAll    @    Transaction.js?f15f:209
perform    @    Transaction.js?f15f:156
batchedUpdates    @    ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates    @    ReactUpdates.js?8e6b:97
dispatchEvent    @    ReactEventListener.js?944f:147

然后去看了源码,感觉是:

class Popup extends React.Component {
  constructor() {
    super();
  }
  handleCancel () {
    if (this.props.onCancel) {
      this.props.onCancel();
    }
  }
  handleConfirm() {
    if (this.props.onConfirm) {
      this.props.onConfirm();
    }
  }
  /**
   * 使用原生事件替代react事件
   * 当BaseModal modal使用原生事件来阻止冒泡时
   * 完成与取消按钮的react onClick会失效,所以使用原生事件而不使用react事件
   */
  componentDidUpdate () {
    if (this.refs.confirmButton &&
      !this.refs.confirmButton.onclick) {
      this.refs.confirmButton.onclick = (e) => {
        e.stopPropagation();
        this.handleConfirm();
      }
      this.refs.cancelButton.onclick =(e) => {
        e.stopPropagation();
        this.handleCancel();
      }
    }
  }
  render () {
    const isZh = !navigator.language ||
                  navigator.language.toLowerCase() === ‘zh-cn’ ||
                  navigator.language.toLowerCase() === ‘zh’;
    let text1 = !isZh ? ‘Cancel’ : ‘取消’;
    let text2 = !isZh ? ‘Finish’ : ‘完成’;
    return (
      <BaseModal
        onCancel={this.handleCancel.bind(this)}
        visible={this.props.visible}>
          <div className="ui-popup-title">
            <span ref="cancelButton">{text1}</span>
            <span ref="confirmButton">{text2}</span>
          </div>
          <div className="ui-popup-content">
            {this.props.children}
          </div>
      </BaseModal>
    )
  }
}

中的:

            <span ref="cancelButton">{text1}</span>
            <span ref="confirmButton">{text2}</span>

对应的:

  /**
   * 使用原生事件替代react事件
   * 当BaseModal modal使用原生事件来阻止冒泡时
   * 完成与取消按钮的react onClick会失效,所以使用原生事件而不使用react事件
   */
  componentDidUpdate () {
    if (this.refs.confirmButton &&
      !this.refs.confirmButton.onclick) {
      this.refs.confirmButton.onclick = (e) => {
        e.stopPropagation();
        this.handleConfirm();
      }
      this.refs.cancelButton.onclick =(e) => {
        e.stopPropagation();
        this.handleCancel();
      }
    }
  }

导致系统不支持?

Warning: string refs are not supported on children of TransitionGroup and will be ignored. Please use a callback ref instead

Support refs on children by jquense · Pull Request #9 · reactjs/react-transition-group

CSSTransitionGroup child ref function called with CSSTransitionGroupChild · Issue #29 · reactjs/react-transition-group

去看了看源码是:

webpack:///../../src/components/modal/BaseModal.jsx?efa4

import ReactCSSTransitionGroup from ‘react-addons-css-transition-group’;
  render () {
    let modal = null;
    if (this.props.visible) {
      modal = (
        <div className="modal-overlay" ref="modalOverlay">
          <div className="modal" ref="modal">
            {this.props.children}
          </div>
        </div>
      );
    }
    return (
      <ReactCSSTransitionGroup
        transitionName="modal-transition"
        transitionEnterTimeout={240}
        transitionLeaveTimeout={240}>
        { modal }
      </ReactCSSTransitionGroup>
    );
  }
}

Suppress ref warning · Issue #906 · FormidableLabs/radium

reactjs component render not call

【后记】

后来去折腾类似问题,搞懂了如何处理refs,详见:

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

转载请注明:在路上 » 【已解决】运行spring-picker的demo中出现警告:Warning string refs are not supported on children of TransitionGroup

发表我的评论
取消评论

表情

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

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