React TypeScript如何将事件侦听器附加到window.matchMedia

Question

加载反应页面时，它会检测用户是否在操作系统中设置了暗模式

const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

然后根据结果渲染两个图像之一

import logoDark from '../images/logoDark.svg';
import logoLight from '../images/logoLight.svg';

<img src={darkMode ? logoDark : logoLight} />

但是，如果用户在页面加载图像后更改模式未更新，如何将事件侦听器添加到window.matchMedia？

我试过了..

  darkMode.addEventListener( "change", (e) => {
    darkMode = e.matches;
    console.log(e.matches) // true / false
  });

但出现错误Type 'boolean' is not assignable to type 'MediaQueryList'.ts(2322)

UDATE ：工作代码

import React, {useContext} from "react";
import Context from '../components/context';
import logoDark from '../images/logoDark.svg';
import logoLight from '../images/logoLight.svg';

const Home: React.FC = () => {
  const darkMode = window.matchMedia('(prefers-color-scheme: dark)');   
  darkMode.addEventListener( "change", (e) => {
    if (e.matches) {
      setGlobal({...global, mode: true})
    } else {
      setGlobal({...global, mode: false})
    }
  });
  return (
  <img src={global.mode ? logoDark : logoLight} />
}

export default Home;

Answer 1

如果我正确理解， darkMode是具有type值的状态。 如果不是，它应该处于状态以便操纵它。 如您所见，类型e.matches返回为布尔值。 因此，您需要将darkMode类型更改为Boolean。

和setState，基于条件。 我没有完整的代码，所以我不会猜测。 如果您粘贴更多代码示例，我可以提供更多帮助。

Answer 2

您要在匹配项上添加eventListener，它是布尔值。 您必须像下面的代码那样做：

 var darkMode = window.matchMedia('(prefers-color-scheme: dark)'); darkMode.addEventListener( "change", (e) => { if (e.matches) { //Perform your action for dark } else { //Perform other action } })