Maison > interface Web > js tutoriel > le corps du texte

Comment restituer la vue dans React lorsque la fenêtre du navigateur est redimensionnée ?

Barbara Streisand
Libérer: 2024-10-19 19:38:29
original
1002 Les gens l'ont consulté

How to Rerender View in React When Browser Window Resizes?

Rerendu de la vue lors du redimensionnement du navigateur avec React

Dans React, il est possible de mettre à jour automatiquement la vue lorsque la fenêtre du navigateur est redimensionnée, fournissant ainsi un expérience utilisateur réactive.

Détection de redimensionnement de fenêtre

L'ajout de l'écouteur de redimensionnement de fenêtre de jQuery est une approche simple pour détecter le redimensionnement de fenêtre. Cependant, React propose des méthodes plus spécifiques à React :

React Hooks

Les React Hooks fournissent un moyen déclaratif d'ajouter une gestion du redimensionnement de la fenêtre. Le hook useWindowSize peut être défini comme suit :

<code class="javascript">import React, { useLayoutEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    const updateSize = () => setSize([window.innerWidth, window.innerHeight]);
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}</code>
Copier après la connexion

Composants de classe React

Pour les composants de classe, la méthode de cycle de vie ComponentDidMount peut être utilisée pour commencer à écouter le redimensionnement de la fenêtre. événements. Le code suivant le démontre :

<code class="javascript">import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };

  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
}</code>
Copier après la connexion

En incorporant la détection de redimensionnement de fenêtre dans votre application React, vous pouvez vous assurer que votre interface utilisateur reste réactive et s'adapte parfaitement aux différentes tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!