Detailliertes Beispiel für die Verwendung von useState in React

importiere React, { useState } von 'react';

Stile aus „./index.less“ importieren;

Funktion Link(Eigenschaften) {
  const { match: { params: { link = '' } = {} } = {} } = props;
  const enCodeUrl = decodeURIComponent(link);
  const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
  zurückkehren (
    <Reagieren.Fragment>
        <iframe
          Titel={Link}
          src={url}
          Stil = {{ Breite: '100 %', Höhe: '100 %', vertikale Ausrichtung: 'oben' }}
          Rahmengrenze="0"
        />
    </React.Fragment>
  );
}

Standardlink exportieren;

importiere React von „react“;
importiere { Spin } von 'antd';

Stile aus „./index.less“ importieren;

exportiere Standardklasse Link erweitert React.Component {
  Zustand = {
    //Ladestatus speichern iLoading: true,
  };

  linkLoad() {
    //Update wird geladen
    this.setState({ iLoading: false });
  }

  rendern() {
    const { match: { params: { link = '' } = {} } = {} } = this.props;
    const { iLoading } = dieser.Zustand;
    const enCodeUrl = decodeURIComponent(link);
    const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
    zurückkehren (
      <Reagieren.Fragment>
        <Drehen spinning={iLoading} wrapperClassName={styles['iframe-loading']}>
          <iframe
            beim Laden = {dieses.linkLoad.bind(dieses)}
            Titel={Link}
            src={url}
            Stil = {{ Breite: '100 %', Höhe: '100 %', vertikale Ausrichtung: 'oben' }}
            Rahmengrenze="0"
          />
        </Drehen>
      </React.Fragment>
    );
  }
}

UseState importieren
importiere React, { useState } von 'react';
Definieren Sie den Status // Der Parameter von useState ist der Anfangswert des Status und setInitLoading ist die Methode zum Ändern des Statuswerts const [initLoading, setInitLoading] = useState(true);
Status beim Laden aktualisieren = {() => setInitLoading(false)}
Der vollständige Code lautet wie folgt:

importiere React, { useState } von 'react';
importiere { Spin } von 'hzero-ui';

Stile aus „./index.less“ importieren;

Funktion Link(Eigenschaften) {
  const { match: { params: { link = '' } = {} } = {} } = props;
  const [initLoading, setInitLoading] = useState(true);
  const enCodeUrl = decodeURIComponent(link);
  const url = enCodeUrl.startsWith('http') ? enCodeUrl : `http://${enCodeUrl}`;
  zurückkehren (
    <Reagieren.Fragment>
      <Drehen spinning={initLoading} wrapperClassName={styles['iframe-loading']}>
        <iframe
          beim Laden = {() => setzeInitLoading(false)}
          Titel={Link}
          src={url}
          Stil = {{ Breite: '100 %', Höhe: '100 %', vertikale Ausrichtung: 'oben' }}
          Rahmengrenze="0"
        />
      </Drehen>
    </React.Fragment>
  );
}

Standardlink exportieren;

const [params, setParams] = useState({
  drehen: 0,
  Farbe: "#000000"
});

const handleInputChange = Ereignis => {
  const Ziel = Ereignis.Ziel;
  setParams({
    ...Parameter,
    [Zielname]: Zielwert
  });
};