javascript - 对较小的屏幕 react 渲染HTML

我正在尝试开发一个响应式设计。
现在，对于较小的屏幕，此控制台正在打印。 console.log("resize--->", window.innerWidth);
该div不打印的地方。
我正在渲染中调用resize方法，但仍然无法正常工作。
this.resize();
你能告诉我如何解决它。
在下面提供我的沙盒和代码段。


https://codesandbox.io/s/material-demo-4gnt3

resize() {
    if (window.innerWidth <= 760) {
      console.log("resize--->", window.innerWidth);

      return (
        <div>
          jkdfjkdfjkdf jdfkljkdfjkdfjk jkdfjkdfjkdfjk jkjkjkjk jkjkjkjk klklklkl
          klklklk klklklkl klklklkl klklklkl klklklkl klklklkl klklklkl klklklkl
          I am here
        </div>
      );
    }
    // this.setState({ hideNav: window.innerWidth <= 760 });
  }
  render() {
    const { classes } = this.props;
    const bull = <span className={classes.bullet}>•</span>;
    {
      this.resize();
    }

}

最佳答案

我稍微重构了您的示例，它对我有用。下方链接：

https://codesandbox.io/embed/material-demo-c7xzb

我所做的更改是：


将您要返回的所有内容都包装在div中
将条件div移到了渲染器的return方法中（屏幕上不会显示其他任何内容）
更改了console.log中的showDiv，但这可能没关系