Teilen von Anwendungsbeispielen für React-Komponentenreferenzen

ref Wie der Name schon sagt, wissen wir, dass es tatsächlich als Referenz auf eine Komponente oder auch als Bezeichner angesehen werden kann. Als Komponentenattribut kann sein Attributwert eine Zeichenfolge oder eine Funktion sein. Dieser Artikel führt Sie hauptsächlich in die detaillierte Verwendung von React-Komponentenreferenzen ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Eigentlich ist die Verwendung von ref nicht notwendig. Selbst in den Anwendungsszenarien ist dies nicht erforderlich, da die mit ref implementierten Funktionen auch in andere Methoden konvertiert werden können. Da ref jedoch seine anwendbaren Szenarien hat, bedeutet dies, dass ref seine eigenen Vorteile hat. Zu diesem und den anwendbaren Szenarien von ref heißt es in der offiziellen Dokumentation:

Nachdem Sie die UI-Struktur von der Render-Methode zurückgegeben haben, möchten Sie möglicherweise aus den Einschränkungen des virtuellen React-DOM ausbrechen und die Komponenteninstanz verwenden zurückgegeben von render Rufen Sie bestimmte Methoden auf. Im Allgemeinen ist dies für den Datenfluss in der Anwendung nicht erforderlich, da der reaktive Datenfluss immer sicherstellt, dass die neuesten Requisiten an jede untergeordnete Ausgabe von render() übergeben werden. Es gibt jedoch immer noch mehrere Szenarien, in denen die Verwendung dieses Ansatzes notwendig oder vorteilhaft ist: Finden des DOM-Markups der gerenderten Komponente (das als DOM-Identifikations-ID betrachtet werden kann), Verwenden von React-Komponenten in einer großen Nicht-React-Anwendung oder Konvertieren Ihrer Vorhandenen Code in React integrieren.

Sehen wir uns ein solches Szenario an (das folgende Beispiel wird häufig zur Erklärung von ref verwendet, sodass ersichtlich ist, dass das unten beschriebene Szenario klassischer sein sollte): Verwenden eines Ereignisses, um die wird auf die leere Zeichenfolge gesetzt und das Element erhält den Fokus.

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

Im obigen Beispiel haben wir das Klicken auf die Schaltfläche implementiert, um das Eingabeelement zu benachrichtigen, den Wert auf eine leere Zeichenfolge festzulegen, aber wir haben das noch nicht implementiert Eingabeelement, um den Fokus zu gewinnen. Dies ist etwas schwierig zu implementieren, da render() nicht die tatsächliche Kombination von Unterkomponenten zurückgibt, sondern lediglich eine Beschreibung einer bestimmten Instanz zu einem bestimmten Zeitpunkt. Dieser Satz fühlt sich ziemlich verwirrend an. Tatsächlich gibt render ein virtuelles DOM zurück, kein echtes DOM. Wir müssen uns also nicht nur auf die von render() zurückgegebenen Komponenten konzentrieren.

Apropos, es hilft uns nicht viel dabei, uns zu konzentrieren. Um die Fokusfunktion zu erreichen, müssen wir ref verwenden. Wir haben oben erwähnt, dass es zwei Arten von Referenzwerten gibt: einer ist ein String und der andere ist eine Callback-Funktion.

Attribut auf Ref-String

React unterstützt ein spezielles Attribut, das Sie zu jeder von render() zurückgegebenen Komponente hinzufügen können. Dies bedeutet, dass die von render() zurückgegebene Komponente markiert ist, sodass die Komponenteninstanz leicht gefunden werden kann. Dafür ist ref da.

ref hat die Form

<input ref="myInput" />

Um auf diese Instanz zuzugreifen, können Sie über this.refs darauf zugreifen:

this.refs.myInput

In früheren Versionen konnten wir über React.findDOMNode(this.refs.myInput) auf das DOM der Komponente zugreifen. Aber jetzt wurde die Funktion findDOMNode aufgegeben und kann direkt über this.refs.myInput aufgerufen werden.

Ref-Callback-Funktion

Das Ref-Attribut kann anstelle eines Namens auch eine Callback-Funktion sein. Diese Funktion wird unmittelbar nach dem Mounten der Komponente ausgeführt. Die referenzierte Komponente wird als Parameter für die Funktion verwendet, die den Komponentenparameter sofort verwenden oder zur späteren Verwendung speichern kann.

Das Formular ist auch relativ einfach:

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

oder

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

Hierbei ist zu beachten, dass der Parameterwert der vorherigen Referenz null ist, wenn die Referenzkomponente entladen wird und sich die Referenz ändert. Dadurch werden Speicherlecks wirksam verhindert. Daher wird es im obigen Code eine if-Beurteilung geben:

if(input != null){
     input.focus();
}

Das Obige stellt die Verwendungsszenarien und Methoden von ref vor. Jetzt werden wir das obige Beispiel so vervollständigen Das implementiert die Funktion zum Erhalten des Fokus

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById(&#39;content&#39;)
);

In diesem Beispiel gibt die Renderfunktion eine Beschreibung der -Instanz zurück. Die tatsächliche Instanz wird jedoch über this.refs.myTextInput abgerufen. Solange eine von render zurückgegebene Unterkomponente ref="myTextInput" hat, erhält this.refs.myTextInput die richtige Instanz.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von Refs zur Positionierung von Dom in Vue und undefinierten Erscheinungen

Das obige ist der detaillierte Inhalt vonTeilen von Anwendungsbeispielen für React-Komponentenreferenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!