javascript - 如何从地图函数中设置 matchMedia 侦听器？

Question

我正在为一个反应应用程序设置多个 matchMedia 查询。

我在尝试找出如何最好地在每个媒体匹配上设置侦听器然后确保我有办法删除侦听器时遇到问题（比如组件卸载时）。

下面为我​​提供了一个对象，我可以相应地查询匹配项。但是我不知道如何设置监听器useEffect，无论逻辑是什么，返回函数都会运行我的函数来删除它们。非常感谢您的任何帮助或建议。

useEffect(() => {
    const mediaList = [
      { "for-mobile-only": "(max-width: 767px)" },
      { "for-tablet-up": "(min-width: 768px)" },
      { "for-laptop-up": "(min-width: 1200px)" },
      { "for-pc-up": "(min-width: 1600px)" },
      { "for-mobile-and-tablet": "(min-width: 0px) and (max-width: 1999px)" },
    ];

    const mediaRun = mediaList.map((item) => {
      return {
        [Object.keys(item)[0]]: window.matchMedia(Object.values(item)[0]),
      };
    });

    //Merge the objects into one
    const media = Object.assign({}, ...mediaRun);

    //I can then query my object properties at will for matches
    console.log(media["for-pc-up"]); // true
    
    const removeListeners = () => // remove the listeners

    return () => removeListeners();
  });

标签： javascriptreactjs