如果窗口宽度，React 执行脚本

Question

我在 React 中有一个按钮，它执行 onClick 函数。我想去掉该按钮，而是在窗口宽度 < 1000px 时以编程方式执行该函数。

一个限制是我无法添加插件。

代码如下......

// 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 < 1000 以编程方式执行其功能。

// 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 提到的上述方法来获取视口/窗口宽度，然后删除该按钮。只需简单地添加一个条件来决定是否渲染它，然后观察状态变化来触发该函数。这里我使用hook来实现

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