属性"msHidden"在类型"文档"上不存在



我得到这个错误,而使用选项卡可见性。其中'msHidden'和'webkitHidden'在类型'Document'上不存在

const TabVisibilityComponent = () => {
let hidden = null;
let visibilityChange = '';
const [action, setAction] = useState('show');
if (typeof document.hidden !== 'undefined') {
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
const handleVisibilityChange = () => {
if (document.hidden) {
setAction('hide');
} else {
setAction('show');
}
};

useEffect(() => {
document.addEventListener('visibilitychange', handleVisibilityChange, false);
window.addEventListener(
'focus',
function() {
setAction('show');
},
false,
);
window.addEventListener('blur', function() {
setAction('hide');
}, false);
}, [visibilityChange]);
return <p></p>;
};
export default TabVisibilityComponent;

我已尝试添加'readonly m希德:布尔''lib.dom.d.ts'的Document界面中文件,因为隐藏的工作很好,它被声明为只读布尔在该文件中,所以尝试相同的msHidden和webkitHidden,但它不工作。我见过很多人使用这个代码,但不知道我的错误是什么。如果有人能解决这个问题,我会很高兴的!

代码直接来自MDN文档,所以你是对的,代码本身是好的。问题是:


  1. lib.dom定义包含浏览器特定的属性。

解决这个问题的方法之一是将文档作为参数传递给一个函数,该函数将这些属性定义为可选的。

const hiddenPropName = (document: Document & {msHidden?: boolean; webkitHidden?: boolean}) => {
if (typeof document.hidden !== "undefined" ) {
return "hidden";
} else if (typeof document.msHidden !== "undefined") {
return "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
return "webkitHidden";
}
// not sure how to handle when none exist
}

但是对于Typescript来说,document.hidden总是存在的。

看起来在caniuse上有前缀和无前缀的支持之间几乎没有任何区别。所以你可以抛弃msHiddenwebkitHidden


  1. 您忽略了您设置的hiddenvisibilityChange变量。

示例中的第一部分代码只是将变量hiddenvisibilityChange设置为属性的名称,以便稍后它们可以访问正确的属性。该示例使用document[hidden],其中hidden是一个变量,但您使用的document.hidden总是获得属性"隐藏";永远不要"躲起来";或"webkitHidden".

他们还在document.addEventListener中为事件使用变量。

如果你想支持前缀,那么你需要使用变量属性和事件名。如果没有,就删除整个第一个代码块。


  1. 你没有正确地调整代码以适应React

你要确保你的useEffect钩子有正确的依赖关系,理想情况下,你应该在useEffect中使用一个清理函数来删除卸载时的事件监听器。

这里最困难的部分是确保您没有创建任何过时的闭包,这些闭包将在求值时使用过时的document值。我实际上不确定没有玩它,如果这是正确的:

const TabVisibilityComponent = () => {
const [action, setAction] = useState("show");
useEffect(() => {
const hide = () => setAction("hide");
const show = () => setAction("show");
const handleVisibilityChange = () => {
document.hidden ? hide() : show();
};
document.addEventListener(
"visibilitychange",
handleVisibilityChange,
false
);
window.addEventListener("focus", show, false);
window.addEventListener("blur", hide, false);
return () => {
document.removeEventListener("visibilitychange", handleVisibilityChange);
window.removeEventListener("focus", show);
window.removeEventListener("blur", hide);
};
}, [setAction]);
return <p></p>;
};

相关内容

  • 没有找到相关文章

最新更新