问题

I created this utility to detect mobile using matchMedia.

我创建了这个实用程序来使用matchMedia检测移动设备。

I created a prop to manually adjust the breakpoint if needed. I defined the breakpoint prop as optional and gave a default value in the function.

如果需要，我创建了一个属性来手动调整断点。我将断点属性定义为可选的，并在函数中给了一个默认值。

For some reason I'm required to pass an empty object though when using the util?

但是当使用该实用程序时，出于某种原因，我需要传递一个空对象？

OtherComponent.tsx:
const { isMobile } = DetectMobile({});

其他组件.tsx：
const { isMobile } = DetectMobile({});

If I remove the empty object I get the error:

如果我删除空对象，我会收到错误消息：

Expected 1 arguments, but got 0

预期需要1个参数，但没有提供0个

I'm fairly new to typescript and I'm not entirely sure what I'm doing wrong, I feel like I should not need to pass the empty object and it should pick up on the default value for the breakpoint prop?

我对TypeScript相对较新，我不完全确定我做错了什么，我觉得我不应该需要传递空对象，它应该使用断点属性的默认值？

Here's the util:

这是实用程序：

import { useEffect, useState, useMemo } from "react";

import { useEffect, useState, useMemo } from "react";

type DetectMobileProps = {
breakpoint?: string;
};

type DetectMobileProps = {
breakpoint?: string;
};

export function DetectMobile({ breakpoint = "768px" }: DetectMobileProps) {
export function DetectMobile({ breakpoint = "768px" }: DetectMobileProps) {

const [isMobileDevice, setIsMobile] = useState(false);

const [isMobileDevice, setIsMobile] = useState(false);

useEffect(() => {
useEffect(() => {

const mediaWatcher = window.matchMedia(`(max-width: ${breakpoint})`);
const mediaWatcher = window.matchMedia(`(max-width: ${breakpoint})`);
setIsMobile(mediaWatcher.matches);
setIsMobile(mediaWatcher.matches);
function updateIsMobile(event) {
  function updateIsMobile(event) {
  setIsMobile(event.matches);
  setIsMobile(event.matches);
}
}
if (mediaWatcher.addEventListener) {
  if (mediaWatcher.addEventListener) {
  mediaWatcher.addEventListener("change", updateIsMobile);
  mediaWatcher.addEventListener("change", updateIsMobile);
}
}

}, []);

}, []);

const isMobile = useMemo(() => {
const isMobile = useMemo(() => {

return isMobileDevice;
return isMobileDevice;

}, [isMobileDevice]);

}, [isMobileDevice]);

return {
return {
isMobile
isMobile
};
};
}
}

Any advice/help?

有任何建议或帮助吗？

OtherCompnent.tsx:
const { isMobile } = DetectMobile({});

Expected 1 arguments, but got 0

import { useEffect, useState, useMemo } from "react";
type DetectMobileProps = {
  breakpoint?: string;
};
export function DetectMobile({ breakpoint = "768px" }: DetectMobileProps) {
  const [isMobileDevice, setIsMobile] = useState(false);
  useEffect(() => {
    const mediaWatcher = window.matchMedia(`(max-width: ${breakpoint})`);
    setIsMobile(mediaWatcher.matches);
    function updateIsMobile(event) {
      setIsMobile(event.matches);
    }
    if (mediaWatcher.addEventListener) {
      mediaWatcher.addEventListener("change", updateIsMobile);
    }
  }, []);
  const isMobile = useMemo(() => {
    return isMobileDevice;
  }, [isMobileDevice]);
  return {
    isMobile
  };
}

答案1

得分: 1

你的DetectMobile函数需要一个参数，因为props本身不是可选的。

如果你想要一个真正可选的prop，你需要像这样做：

export function DetectMobile(prop?: string) => {
   // 代码的其余部分
   // 将"breakpoint"调整为"prop.breakpoint"
}

export function DetectMobile(prop?: string) => {
   // rest of code
   // adjust "breakpoint" to "prop.breakpoint"
}