Wozu dienen React-Komponentenreferenzen? Detaillierte Erläuterung der Rolle von Reaktionskomponenten-Referenzen und ihrer Verwendung

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der React-Komponentenreferenzen erläutert. Schauen wir uns nun den Inhalt der

Ref. an dass es tatsächlich sein kann Der Stand ist eine Referenz für eine Komponente, die man auch als Logo bezeichnen kann. Als Komponentenattribut kann sein Attributwert eine Zeichenfolge oder eine Funktion sein.

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 einfügen.

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: ''}); // Wert festlegen Für die leere Zeichenfolge > // Hier möchten Sie den Fokus erreichen
},
render: function () {
Return (
& lt; p & gt;
& lt ; input
value={this.state.userInput}
         onChange={this.handleChange}
                                                       ="Zurücksetzen und fokussieren"
onClick ={this.clearAndFocusInput}
         />
                                                                                                                    Durch Klicken auf die Schaltfläche wird das Eingabeelement benachrichtigt, den Wert auf die leere Zeichenfolge festzulegen. Dies wurde jedoch noch nicht implementiert, damit das Eingabeelement den Fokus erhalten kann. 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 scheint ziemlich verwirrend zu sein. Tatsächlich handelt es sich beim Rendern um

virtuelles DOM

, nicht um das echte 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.

Ref-String-Attribut

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

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. (Wenn Sie mehr erfahren möchten, lesen Sie die Spalte React Reference Manual auf der chinesischen PHP-Website, um mehr zu erfahren)

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 this._input = c} } /> ; ;
},
componentDidMount: function() {
this._input.focus();
},

oder

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

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

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

Das Obige beschreibt das Anwendungsszenarien von Referenzen und Methoden. Im Folgenden werden wir das obige Beispiel vervollständigen, um die Funktion zum Erhalten von Fokus

zu erreichen

var App = React.createClass({
    getInitialState: function() {
        return {userInput: ''};
    },
    handleChange: function(e) {
        this .setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
        this.setState({userInput: ''}); // Eingabe löschen
        // Wir möchten den jetzt fokussieren!
        if (this.refs.myTextInput !== null) {
            this.refs.myTextInput.focus();
        🎜>    },
    render: function() {
        return (
           

                                    value={this. state.userInput}
                    onChange={this .handleChange}
                    ref=“myTextInput“      🎜>                    type="button"
                    value="Reset And Focus"
                    onClick={this.clearAndFocusInput } } } 🎜> document.getElementById('content')
);

在这个例子中， render 函数返回一个 实例的描述.但是真正的实例通过 this.refs. myTextInput. myTextInput就会获取到正确的实例.

上面就是ref的所有内容，更多关于ref的介绍可以参考Ref to Components。

本篇文章到这就结束了（想看更多就到PHP中文网
React使用手册
栏目中学习），有问题的可以在下方留言提问.

Das obige ist der detaillierte Inhalt vonWozu dienen React-Komponentenreferenzen? Detaillierte Erläuterung der Rolle von Reaktionskomponenten-Referenzen und ihrer Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!