0

在使用 MUIuseMediaQuery钩子时，我注意到我的 react 应用程序有问题并抛出错误，因为钩子最初无法识别正确的断点，然后页面很快以正确的值重新呈现。

例子：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'));
console.log(mobile)

安慰：

false
true

这是怎么回事？

4

2 回答 2

2

这是useMediaQuery钩子的预期行为。MUI 文档中对此进行了解释：

要执行服务器端的 hydration，钩子需要渲染两次。第一次使用 false，服务器的值，第二次使用解析的值。这种双通道渲染周期有一个缺点。它更慢。如果您只进行客户端渲染，则可以将此选项设置为 true。

因此，要在第一页渲染上获得正确的值，挂钩noSsr中的选项useMediaQuery需要是true.

有两种选择：

1) 每个组件：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'), {noSsr: true});

2）在theme对象中全局：

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
          noSsr: true,
      },
    },
  }

显然，这只能在没有服务器端渲染的情况下工作。

下面的原始答案适用于 Material-UI v4，但该Hidden组件已在 v5 中弃用。

原答案：

我意识到通过删除媒体查询并将其替换为 Material-UI<Hidden />组件，它可以按照我的意愿工作。

export const ResponsiveMenuItem = forwardRef((props, ref) => {
  const { children, ...other } = props;

  return (
    <>
      <Hidden smUp>
        <option ref={ref} {...other}>
          {children}
        </option>
      </Hidden>
      <Hidden only="xs">
        <MenuItem ref={ref} {...other}>
          {children}
        </MenuItem>
      </Hidden>
    </>
  );
});
于 2021-07-23T10:57:37.813 回答
0 
const mobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));

试试这个

于 2021-09-21T11:47:05.347 回答