jsx根据大小删除父级答案

【问题标题】：jsx remove parent according to sizejsx根据大小删除父级
【发布时间】：2021-11-05 03:41:40
【问题描述】：

说我有一个这样的 DOM

<div className="parent">
   <div>child 1</div>
   <div>child 2</div>
</div>

如果它是移动的，我想让 DOM 变成

   <div>child 1</div>
   <div>child 2</div>

我可以只用css吗？我想我必须在 jsx 中使用条件表达式？在 jsx 中使用什么库来检查媒体查询？

【问题讨论】：

不，你不能在纯 CSS 中做到这一点。但您可能拥有桌面和移动版本，并根据屏幕大小隐藏其中一个。

标签： html reactjs jsx

【解决方案1】：

是的，您需要为此使用 jsx

你有（至少我能想到）两种方法：

您可以像这样使用 vanila JS：

const viewportWidth = window.innerWidth;

然后根据您的需要使用该值来条件渲染 jsx。

或者您可以使用诸如 react-responsive 之类的东西：

npm install react-responsive --save

然后在您的应用中：

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const Example = () => {
  // you can add whatever widths you want

  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })

  const isTabletOrMobile = useMediaQuery({ 
    query: '(max-width: 1224px)' 
  })

  return (
    <div>
      // your conditional jsx here
    </div>
  );
}

这里是参考：
https://www.npmjs.com/package/react-responsive
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

【讨论】：