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方法中（屏幕上不会显示其他任何内容）
更改了console.log中的showDiv，但这没关系

对较小的屏幕反应渲染HTML

2 个答案: