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 } })