javascript - 为较小的屏幕 react 渲染 html

Question

• 我正在尝试开发响应式设计。
• 现在这个控制台正在打印较小的屏幕。 console.log("resize--->", window.innerWidth);
• 这个 div 没有打印的地方。
• 我正在 render 中调用 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();
    }

Answer 1

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

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

我所做的更改是:

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