如何简化useMediaQuery多断点检测代码实现动态Grid列数？

你的代码可以从减少冗余媒体查询、简化条件判断逻辑这两个方向优化，以下是具体方案：

1. 移除冗余查询，用链式三元简化判断 #

原代码里的isMdDown是多余的——当isMdUp为false时，当前屏幕已经是md及以下尺寸，此时只要判断isSmUp就能确定是sm到md的区间。直接用链式三元表达式替代if-else，代码更紧凑：

const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));

const imageListCol = isMdUp ? 3 : isSmUp ? 2 : 1;

return (
    <ImageList cols={imageListCol} gap={20}>
        ...
    </ImageList>
);

2. 封装自定义Hook，复用逻辑 #

如果多个组件需要类似的动态列数逻辑，把断点检测和列数映射封装成自定义Hook，后续复用更方便：

// 自定义Hook
const useGridColumns = () => {
  const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
  const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));

  return isMdUp ? 3 : isSmUp ? 2 : 1;
};

// 组件内使用
const YourComponent = () => {
  const imageListCol = useGridColumns();

  return (
    <ImageList cols={imageListCol} gap={20}>
        ...
    </ImageList>
  );
};

3. 用断点映射对象管理，扩展更友好 #

如果后续要增加lg、xl等更多断点，用对象存储断点与列数的对应关系，按优先级从高到低匹配，扩展性更强：

const YourComponent = () => {
  // 定义断点优先级：md > sm > 默认
  const breakpointColumns = [
    { query: ({ breakpoints }) => breakpoints.up('md'), cols: 3 },
    { query: ({ breakpoints }) => breakpoints.up('sm'), cols: 2 },
  ];

  // 找到第一个匹配的断点
  const imageListCol = breakpointColumns.find(({ query }) => useMediaQuery(query))?.cols || 1;

  return (
    <ImageList cols={imageListCol} gap={20}>
        ...
    </ImageList>
  );
};

内容的提问来源于stack exchange，提问作者Jeremy Chee