折腾:
【未解决】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
去看了看源码是:
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