如果 window 宽度，则反应执行脚本

Question

我在 React 中有一个执行 onClick 函数的按钮。我想去掉按钮，如果 window width < 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 上实现类似的问题，这些问题要么调用插件，要么过时，要么用例太不同（例如，"re-render everything based on screen size"）。我也尝试过 React-ify vanilla javascript。这看起来应该很简单，但我做不到。

有没有 React 高手可以提供干净、高效的解决方案？

Answer 1

试试看这个答案，我想这就是您要搜索的内容：

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

Answer 2

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

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

如果 window 宽度，则反应执行脚本

React execute script if window width

media-queries

reactjs

responsive