Réagir à la hauteur adaptative en fonction du partage d'exemples de largeur

Parfois pour une mise en page responsive, il faut adapter la hauteur en fonction de la largeur du composant. CSS ne peut pas réaliser ce type de changement dynamique. Traditionnellement, jQuery est utilisé pour y parvenir. Cet article présente principalement l'exemple de code de React adaptant la hauteur en fonction de la largeur. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Il n'est pas nécessaire de s'appuyer sur JQuery dans React, l'implémentation est relativement simple, il suffit de changer la largeur après DidMount.

Essayez Codepen

Il est à noter que les modifications doivent être synchronisées lors du redimensionnement et qu'un auditeur doit être enregistré

class Card extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   width: props.width || -1,
   height: props.height || -1,
  }
 }

 componentDidMount() {
  this.updateSize();
  window.addEventListener('resize', () => this.updateSize());
 }

 componentWillUnmount() {
  window.removeEventListener('resize', () => this.updateSize());
 }

 updateSize() {
  try {
   const parentDom = ReactDOM.findDOMNode(this).parentNode;
   let { width, height } = this.props;
   //如果props没有指定height和width就自适应
   if (!width) {
    width = parentDom.offsetWidth;
   }
   if (!height) {
    height = width * 0.38;
   }
   this.setState({ width, height });
  } catch (ignore) {
  }
 }

 render() {
  return (
   <p className="test" style={ { width: this.state.width, height: this.state.height } }>
    {`${this.state.width} x ${this.state.height}`}
   </p>
  );
 }
}

ReactDOM.render(
 <Card/>,
 document.getElementById(&#39;root&#39;)
);

Références

Cycle de vie de React

Recommandations associées :

JavaScript gère la hauteur adaptative Iframe (sous le même nom de domaine ou sous des noms de domaine différents)

Solution pour la hauteur adaptative dans la mise en page DIV+CSS

Comment centrer le texte sous hauteur adaptative sur terminal mobile

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!