對較小的屏幕反應渲染HTML

Question

• 我正在嘗試開發一個響應式設計。
• 現在，對於較小的屏幕，此控制台正在打印。 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();
    }

}

Answer 1

使用內部反應狀態來控制顯示元素，如下所示：

 resize() { if (window.innerWidth <= 760) { this.setState({ showDiv: true }); } else { this.setState({ showDiv: false }); } } render() { return ( <Card className={classes.card}> {this.state.showDiv && <div>jkdfjkdfjkdf...</div>} </Card> ); } 

Answer 2

我稍微重構了您的示例，它對我有用。 下方鏈接：

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

我所做的更改是：

• 將您要返回的所有內容包裝在div
• 將條件div移到了渲染器的return方法中（屏幕上不會顯示其他任何內容）
• 在showDiv更改了console.log ，但這可能沒關系