Reagieren Sie auf die adaptive Höhe basierend auf der gemeinsamen Nutzung von Breitenbeispielen

Manchmal müssen wir für ein responsives Layout die Höhe entsprechend der Breite der Komponente anpassen. CSS kann diese Art der dynamischen Änderung nicht erreichen. Traditionell wird hierfür jQuery verwendet. In diesem Artikel wird hauptsächlich der Beispielcode für die Anpassung der Höhe an die Breite von React vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Es besteht keine Notwendigkeit, sich in React auf JQuery zu verlassen. Die Implementierung ist relativ einfach. Ändern Sie einfach die Breite nach DidMount.

Codepen ausprobieren

Es ist zu beachten, dass Änderungen während der Größenänderung synchronisiert werden müssen und ein Zuhörer registriert werden muss

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

Referenzen

Lebenszyklus reagieren

Verwandte Empfehlungen:

JavaScript verarbeitet die adaptive Höhe von Iframes (unter demselben oder unterschiedlichen Domainnamen)

Lösung für die adaptive Höhe im DIV+CSS-Layout

So zentrieren Sie Text unter adaptiver Höhe auf einem mobilen Endgerät

Das obige ist der detaillierte Inhalt vonReagieren Sie auf die adaptive Höhe basierend auf der gemeinsamen Nutzung von Breitenbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!