реагировать рендеринга HTML для небольших экранов

Question

• Я пытаюсь разработать адаптивный дизайн.
• сейчас для небольших экранов эта консоль печатает.console.log("resize--->", window.innerWidth);
• где этот div не печатает.
• Я вызываю метод изменения размера при рендеринге, но он все еще не работает.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 вашего рендера (больше ничего не будет отображаться на экране)
• изменил ваши console.log s в showDiv, но это, вероятно, не имеет значения

Answer 2

Используйте внутреннее состояние реакции для управления, показывая элемент, как показано ниже:

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>
  );
 
}