对于响应式是否需要组件级测试？答案

【问题标题】：For responsive is it require component level testing?对于响应式是否需要组件级测试？
【发布时间】：2021-09-28 19:06:34
【问题描述】：

在我使用 reactjs 的响应式布局中，根据宽度，我将模板包装器 div 变成了 display:none。有用。但是我得到了另一个建议来检查 ts 文件并将值返回为 null。除了media-query，真的需要吗？

component.ts:

import React from "react";
import { useWindowDimensions } from "./../hooks/useWindowDimensions";

const SideBar = () => {
    if (window.innerWidth < 768) {
        return null; //is it really required, when used in media query in css?
    }
    return <div className="sidebar">Right menu</div>
}

export default SideBar;

css：

@media screen and (orientation:portrait) and (max-width:768px) {
  .sidebar {
    display: none;
  }
}

两者都是必需的吗？如果是这样，为什么我们都需要它们？

【问题讨论】：

标签： reactjs responsive-design media-queries

【解决方案1】：

使用 css 方法会使您的代码具有响应性，而第一种方法会使您的代码仅在生命周期中检查窗口的大小。话虽如此，您可以通过在 useEffect 挂钩中调用一个函数来获得相同的结果，并将 window 作为第二个参数传递。现在对于您的问题，不，绝对没有必要同时拥有它们。他们在得到相同的结果时是重叠的。所以最好只有一个。（我的偏好是 css 方法）

【讨论】：