Implementierung der DOM-Operation in React

Vorherige Wörter

In manchen Fällen ist es notwendig, Änderungen an untergeordneten Elementen außerhalb des typischen Datenflusses zu erzwingen. Das zu ändernde untergeordnete Element kann eine React-Komponenteninstanz oder ein DOM-Element sein. Zurzeit werden Refs zum Betrieb von DOM verwendet.

Anwendungsszenarien

Hier sind einige Situationen, in denen Schiedsrichter geeignet sind:

1. Fokus, Textauswahl oder Mediensteuerung verwalten

2. Erzwungene Animation auslösen

3. Integrieren Sie DOM-Bibliotheken von Drittanbietern

Vermeiden Sie die Verwendung von Referenzen, wenn Sie dies deklarativ tun können.

[Hinweis] Stellen Sie die Methoden open() und close() nicht direkt in der Dialogkomponente zur Verfügung. Es ist besser, die Eigenschaft isOpen zu übergeben.

Referenz

React unterstützt das Hinzufügen spezieller Attribute zu jeder Komponente. Das Ref-Attribut akzeptiert eine Rückruffunktion, die sofort ausgeführt wird, wenn die Komponente bereitgestellt oder entfernt wird.

[Hinweis] Holen Sie sich die Referenz, nachdem die Komponente montiert wurde. Es kann nicht in componentWillMount oder dem ersten Render erhalten werden, aber in componentDidMount

HTML-Elemente

Beim Hinzufügen eines Ref-Attributs zu einem HTML-Element erhält der Ref-Callback das zugrunde liegende DOM-Element als Parameter.

React-Komponenten übergeben das DOM-Element beim Laden an die Ref-Callback-Funktion und übergeben null beim Entladen. Der Ref-Rückruf wird vor den Lebenszyklus-Rückrufen componentDidMount oder componentDidUpdate ausgeführt.

Klasse CustomTextInput erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.Fokus = dies.Fokus.binden(dies);
  }
  Fokus() {
    dies.textInput.focus();
  }
  rendern() {
    zurückkehren (
      <div>
        <Eingabe
          Typ="Text"
          ref={(Eingabe) => { diese.textInput = Eingabe; }} />
        <Eingabe
          Typ="Schaltfläche"
          value="Texteingabe fokussieren"
          beiKlick={this.focus}
        />
      </div>
    );
  }
}

Eine kürzere Schreibweise ist wie folgt

ref={Eingabe => diese.textEingabe = Eingabe}

Klassenkomponente

Wenn das Ref-Attribut für eine benutzerdefinierte Komponente verwendet wird, die mit einer Klasse deklariert wurde, empfängt der Ref-Rückruf die geladene React-Instanz.

Klasse AutoFocusTextInput erweitert React.Component {
  componentDidMount() {
    dies.textInput.focusTextInput();
  }

  rendern() {
    zurückkehren (
      <BenutzerdefinierterTextInput
        ref={(Eingabe) => { diese.textInput = Eingabe; }} />
    );
  }
}

[Hinweis] Diese Methode ist nur für in der Klasse deklarierte CustomTextInput gültig

Funktionale Komponenten

Sie können das Ref-Attribut nicht auf Funktionskomponenten anwenden, da diese keine Instanzen haben.

[DOM-Knoten übergeordneten Komponenten zugänglich machen]

Stellen Sie untergeordneten Knoten ein spezielles Attribut zur Verfügung. Der untergeordnete Knoten erhält ein Funktionsattribut, das als Ref-Attribut an den DOM-Knoten angehängt wird. Dadurch kann das übergeordnete Element über die Middleware einen Verweis an den DOM-Knoten des untergeordneten Elements zurückgeben.

Diese Methode ist sowohl auf Klassenkomponenten als auch auf Funktionskomponenten anwendbar.

Funktion CustomTextInput(Eigenschaften) {
  zurückkehren (
    <div>
      <Eingabe ref={props.inputRef} />
    </div>
  );
}

Klasse Parent erweitert React.Component {
  rendern() {
    zurückkehren (
      <BenutzerdefinierterTextInput
        inputRef={el => dieses.inputElement = el}
      />
    );
  }
}

Im obigen Beispiel übergibt Parent seinen Ref-Rückruf als speziellen InputRef an CustomTextInput, den CustomTextInput dann über das Ref-Attribut an <input> übergibt. Schließlich wird this.inputElement in Parent auf den DOM-Knoten gesetzt, der dem <input>-Element in CustomTextInput entspricht.

Unkontrollierte Komponenten

Um eine unkontrollierte Komponente zu schreiben, können Sie statt Ereignishandlern für jede Statusaktualisierung einen Verweis verwenden, um den Formularwert aus dem DOM abzurufen.

[Hinweis] Sie können den DOM-Wert über e.target.value abrufen, ohne binden zu müssen.

Klasse NameForm erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.handleSubmit = dies.handleSubmit.bind(dies);
  }

  handleSubmit(Ereignis) {
    alert('Ein Name wurde übermittelt: ' + this.input.value);
    event.preventDefault();
  }

  rendern() {
    zurückkehren (
      <form onSubmit={this.handleSubmit}>
        <Bezeichnung>
          Name:
          <Eingabetyp="Text" ref={(Eingabe) => diese.Eingabe = Eingabe} />
        </Bezeichnung>
        <input type="submit" value="Senden" />
      </form>
    );
  }
}

Da unkontrollierte Komponenten echte Daten im DOM speichern, ist es bei der Verwendung unkontrollierter Komponenten einfacher, React- und Nicht-React-Code gleichzeitig zu integrieren.

【Standardwert】

Während des React-Lebenszyklus überschreibt das Wertattribut des Formularelements den Wert im DOM. Bei der Verwendung einer unkontrollierten Komponente möchten Sie normalerweise, dass React ihr einen Anfangswert zuweist, nachfolgende Aktualisierungen jedoch nicht mehr steuert. Um dieses Problem zu lösen, können Sie anstelle eines Werts ein defaultValue-Attribut angeben.

rendern() {
  zurückkehren (
    <form onSubmit={this.handleSubmit}>
      <Bezeichnung>
        Name:
        <Eingabe
          Standardwert = "Bob"
          Typ="Text"
          ref={(Eingabe) => diese.Eingabe = Eingabe} />
      </Bezeichnung>
      <input type="submit" value="Senden" />
    </form>
  );
}

Ebenso unterstützen <input type="checkbox"> und <input type="radio"> defaultChecked, <select> und <textarea> unterstützen defaultValue

ReagierenDOM

Das react-dom-Paket stellt Methoden für das DOM bereit, die aus dem obersten Bereich Ihrer Anwendung aufgerufen werden können und bei Bedarf auch als Ausstiegspunkt außerhalb des React-Modells verwendet werden können. Aber die meisten Komponenten sollten dieses Paket nicht benötigen

machen()
unmountComponentAtNode()
findDOMNode()

【machen()】

ReactDOM.render(
  Element,
  Container,
  [Rückruf]
)

Rendert ein React-Element, das an das DOM-Element im bereitgestellten Container angehängt wird, und gibt eine Referenz auf die Komponente zurück (oder null für zustandslose Komponenten).

Wenn das React-Element zuvor in einen Container gerendert wurde, führt dieser Code eine Aktualisierung durch und ändert nur die DOM-Elemente, die erforderlich sind, um den neuesten Status des Elements widerzuspiegeln.

【Komponente am Knoten aushängen()】

ReactDOM.unmountComponentAtNode(Container)
Entfernt eine gemountete React-Komponente aus dem DOM-Element und löscht ihre Ereignishandler und ihren Status. Wenn im Container keine Komponenten montiert sind, tut diese Funktion nichts. Gibt „true“ zurück, wenn eine Komponente deinstalliert wird, und „false“, wenn keine Komponente zur Deinstallation verfügbar ist.

[DOMNode finden()]

ReactDOM.findDOMNode(Komponente)
Wenn diese Komponente im DOM bereitgestellt wurde, gibt die Funktion das entsprechende im Browser generierte DOM-Element zurück. Diese Funktion ist sehr nützlich, wenn Sie Werte aus dem DOM lesen müssen, beispielsweise Formularwerte, oder die Größe von DOM-Elementen berechnen müssen. In den meisten Fällen können Sie einen Verweis auf einen DOM-Knoten hinzufügen und die Verwendung der Funktion findDOMNode vollständig vermeiden. Wenn render null oder false zurückgibt, gibt findDOMNode ebenfalls null zurück.

Neuer Schiedsrichter

Vor Version 16.3 gab es in React zwei Möglichkeiten, Referenzen bereitzustellen: String und Callback. Da die String-Methode einige Probleme hat, wird offiziell empfohlen, Callbacks zu verwenden, um Referenzen zu verwenden. Die jetzt eingeführte createRef-API gilt offiziell als fehlerfreie Methode zur Verwendung von ref, und die Rückrufmethode kann auch nachgeben

Klasse MyComponent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.meinRef = React.createRef();
  }
  rendern() {
    gibt <div ref={this.myRef} /> zurück;
  }
}

Verwenden Sie dann das aktuelle Attribut, um das aktuelle Element abzurufen

dies.meineRef.aktuell

Typische Anwendungen sind unten aufgeführt

  Konstruktor (Requisiten) {
    super(Requisiten)
    dies.Maske = React.createRef()
    dies.MenuList = React.createRef()
  }
  handleKlick = () => {
    ReactDOM.findDOMNode(diese.MenuList.current).classList.toggle('transform-zero')
    ReactDOM.findDOMNode(diese.Maske.aktuell).classList.toggle('Maske anzeigen')
  }

[Anmerkung] Die von mit styledComponents gestalteten Elementen bereitgestellte Schnittstelle ist innerRef, nicht ref

<Wrap innerRef={this.itemRef}>

Dies ist das Ende dieses Artikels über die Implementierung von DOM-Operationen in React. Weitere relevante DOM-Operationen in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!