[React / Next] 通过动态值更改媒体查询断点的响应式响应

这是个人回忆录。

环境

• 反应：17.0.2
• 下一个：11.1.3
• 反应响应：9.0.0-beta.10
• 萨斯：1.49.9
• @chakra-ui/反应：1.8.5

你想做的事

• 我想从父组件接收一个动态值并将其用作断点值
• 隐藏元素显示：无；低于断点值时

安装库

yarn add react-responsive

关于反应响应

• React 挂钩跟踪 CSS 媒体查询状态
• 8.0.0及以上版本成为钩子
• 在组件中轻松设置断点
• 由于是钩子，所以反应性地返回一个值，即使渲染后改变浏览器大小也能正确判断
• 适用于实现复杂 UI 规范的案例

示例代码

import { Text, HStack } from '@chakra-ui/react';
import { useMediaQuery } from 'react-responsive';
import styles from './contents.module.scss';

interface Props<T> {
  data: string[];
  minWidth: string | number;
}

export const Component = ({ minWidth }: Props) => {
  const isBreakPoint = useMediaQuery({ query: `(max-width: ${minWidth})` });

  const contents: React.ReactNode[] = [];
  
  for (const key in data) {
    const hiddenClass =
      isBreakPoint && key === 'hoge' ? styles.sp_hidden : '';

    contents.push(
      <>
        <Text
          minWidth={minWidth}
          className={`${hiddenClass}`}
        >
          sampleText
        </Text>
      </>
    );
  }

  return (
    <HStack minWidth={rowMinWidth}>
      {contents}
    </HStack>
  );
};

官方的

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623144.html