我正在测试一个InfiniteScroll 组件，但是遇到了这个奇怪的问题；querySelector('html, body')不具有上述方法所期望的属性（例如 , , , clientHeight,innerHeight等querySelector），但具有我怀疑来自.styleaddEventListener_readOnly_tagName_created_ownerDocumentjsdom
我querySelector('html, body')在测试套件中运行它来滚动浏览器。document.querySelector这是测试套件中的一个片段：
var body = document.querySelector('html, body');
console.log(body); // Object properties I do not expect
console.log(body.scrollTop); // => undefined
这是InfiniteScroll 组件的代码：
import React from 'react';
import timeout from '../../utils/timeout';
var _promise = null; // Promise flag
var _body = document.body;
var InfiniteScroll = React.createClass({
propTypes: {
/**
* Flag to check if the callback should be executed
* once the threshold / bottom has been reached.
*
* @default false
*/
disabled: React.PropTypes.bool,
/**
* The callback to be executed once the
* threshold / bottom has been reached
*/
callback: React.PropTypes.func.isRequired,
/**
* Allowance to be scrolled, so callback is executed
* although not actually at the bottom
*
* * @default 250
*/
threshold: React.PropTypes.number,
/**
* Number of milliseconds to delay the execution
* of the callback.
*
* @default 250
*/
throttle: React.PropTypes.number
},
/**
* Some property defaults
*/
getDefaultProps() {
return { disabled: false, threshold: 250, throttle: 250 };
},
/**
* Run `forceUpdate` when the window
* resizes, so the bottom is still properly calculated
*/
componentDidMount() {
window.addEventListener('scroll', this._handleScroll, false);
window.addEventListener('onresize', this._handleWindowResize);
},
/**
* Unmount our `forceUpdate` bind
*/
componentWillUnmount() {
window.removeEventListener('scroll', this._handleScroll);
window.removeEventListener('onresize', this._handleWindowResize);
},
/**
* Handles our window resize. This function
* simply executes `forceUpdate`
*/
_handleWindowResize(evt) {
this.forceUpdate();
},
render() {
var { disabled, callback, threshold, throttle, ...other } = this.props;
return (
<div {...other}>
{this.props.children}
</div>
);
},
/**
* Handles infinite scrolling accordingly
*/
_handleScroll(evt) {
var { callback, disabled, threshold, throttle } = this.props;
var height = _body.clientHeight;
var scroll = _body.scrollTop;
var bottom = _body.scrollHeight;
if ( disabled === true || _promise !== null || scroll + threshold < bottom - height ) {
return;
}
_promise = timeout(throttle).then(() => {
// We should be using `finally`, but es6-promise unfortunately
// does not support this. Since we're not actually doing any
// async code (and which could fail), let's just use then. Overhead
// just to be arrogant
Promise.resolve(callback()).then(() => { _promise = null; });
})
}
});
export default InfiniteScroll;
有什么方法可以访问上述预期的属性吗？谢谢。