import React, { useEffect, useState } from 'react';

type TOpenFilterHook = {
  showFilter: boolean;
  setShowFilter: any;
}

export const useOpenFiltersHook = (): TOpenFilterHook => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

... ... ...

const { showFilter, setShowFilter } = useOpenFiltersHook();
  {showFilter && (
    <div>
      <button onClick={() => setShowFilter(false)}>
        <div>Show filter</div>
      </button>
    </div>
  )}

从钩子返回setShowFilter并在onClick中调用它

我更新了Bikas Lin的答案。大部分是正确的，但有一些问题。
函数声明不应该出现在这里。而且目前它总是在初始化后打开，所以更好的方法是：

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (isOpened): boolean => {
  const [showFilter, setShowFilter] = useState(isOpened);

  function handleShowFilter(): void {
    setShowFilter(true);
  }

  useEffect(() => {
    window.addEventListener('resize', handleShowFilter);

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

现在你可以设置是否显示它。你也可以在钩子中包含切换逻辑，这样你就不需要在所有组件中都这样做了。根据你的情况，你可以只返回toggle函数而不是setShowFilter，或者把它作为第三个属性添加进去。

这不是在react中更新状态的方法

<button onClick={() => !showFilter}>

而是从自定义挂钩返回状态更新函数

export const useOpenFiltersHook = (): boolean => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

现在，您可以通过以下方式访问组件中的set state函数

const {showFilter, setShowFilter } = useOpenFiltersHook();
{showFilter && (
        <div>
          <button onClick={setShowFilter((previousState)=> return !previousState)}>
            <div>Show filter</div>
          </button>
        </div>
      )}