如果窗口宽度反应执行脚本

Question

我在 React 中有一个执行 onClick 函数的按钮。我想摆脱按钮，而是在窗口宽度

限制是我不能添加插件。

这是代码的样子...

// Do I need useState, useEffect?
import React, { PureComponent } from "react";

class MainNav extends PureComponent {
state = {
  // Does something go here? What goes here and how do I use
  // state to execute the function?
  navIsCollapsed: false,
};

// this controls rendering of huge images
toggleShowImages() {
  this.setState({
    navIsCollapsed: !this.state.navIsCollapsed,
  });
}

// I want this to be executed by width < 1000
handleSideNavToggle = () => {
  this.toggleShowImages(); // controls if React renders components
  document.body.classList.toggle("side-nav-closed");
}

这里渲染当前正在执行该功能的按钮。我希望 width

// window width < 1000 should execute this function
<div onClick={this.handleSideNavToggle}>Don't render huge images</div>

// here are the images the function conditionally renders
<should show images && 
  <div>Massive huge image</div>
  <div>Massive huge image</div>
  <div>Massive huge image</div>
>

我可以使用 CSS 媒体查询来显示或隐藏我不想要的大量图像，但这是对 React 的可怕使用。

我已经查看并尝试在 SO 上实现类似的问题，这些问题要么调用插件，要么已过时，要么用例太不同（例如，“根据屏幕大小重新渲染所有内容”）。我也尝试过 React-ify vanilla javascript。这看起来应该很简单，但我做不到。

那里有任何 React 向导可以用干净、有效的解决方案来回答吗？

Answer 1

使用 Mathis Delaunay 提到的上述方法来获取视口/窗口宽度，然后去掉那个按钮。只需简单地为是否渲染它添加一个条件，然后观察状态变化以触发该功能。 这里我用钩子来做

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [width]);

  useEffect(() => {
    width < 600 && handleSideNavToggle();
  },[width]);

  function handleSideNavToggle() {
    console.log("toggle it");
  }

  return (
    <div className="App">
      {width > 600 && (
        <button onClick={() => handleSideNavToggle()}>
          Don't render huge images
        </button>
      )}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个工作示例。为了便于查看，我将要处理的宽度设置为600。

https://codesandbox.io/s/react-hooks-counter-demo-w9wgv

Answer 2

试着看看这个答案，我认为这是你正在寻找的：

Get viewport/window height in ReactJS

如果window.innerWidth小于1000，你只需要检查updateWindowDimension，如果是，将css按钮属性更改为display : none;或visibility: hidden;。