反应，从自定义钩子返回布尔值

Question

我有一个计算页面高度和宽度的自定义钩子，这个：

const [windowSize, setWindowSize] = useState({
  height: 0,
  width: 0
});

useEffect(() => {
  const handleResize = () => {
    setWindowSize({
      height: window.innerHeight,
      width: window.innerWidth
    });
  };
  window.addEventListener('resize', handleResize);
  handleResize();
  return () => window.removeEventListener('resize', handleResize);
}, []);

return windowSize;

然后，在不同的组件中，我决定页面何时是“移动”的：

const isMobile: boolean = (useWindowSize().width <= 768);

然后在我的 return 函数中，我使用 isMobile 布尔值来渲染某些东西。

我的问题是，我如何才能使用自定义钩子，以便仅通过调用它就返回 isMobile 值，换句话说，我想要类似的东西：

const isMobile: boolean = useIsMobile();

Answer 1

您可以创建另一个自定义挂钩。一些简单的东西，比如：

export const PHOTOS = [
    {
        id: 0,
        name: 'Card Home Image',
        image: 'images/homeCard.jpg',
    }
]

用法：

const useIsMobile = (width = 768) => useWindowSize().width <= width;

演示

Answer 2

您可以在状态对象中添加额外的属性：

const [windowSize, setWindowSize] = useState({
  height: 0,
  width: 0,
  isMobile: false
});

并将其设置为：

setWindowSize({
  height: window.innerHeight,
  width: window.innerWidth,
  isMobile: window.innerWidth <= 768
});

用法：

const {isMobile} = useWindowSize();