Antwort Ereignisziel Elternknoten

Question

Ist es möglich, den übergeordneten Knoten des Ereignisziels auf dem virtuellen DOM zu erhalten?

In meiner grundlegenden Reaktionskomponente habe ich eine Methode, die aus onClick-Ereignis ausgelöst wird, möchte ich die übergeordneten virtuellen DOM-Knoteneigenschaften abrufen.

handleClick(e){ 
    // The following code only gives me the actual DOM parent Node 
    ReactDOM.findDOMNode(e.target).parentNode 

} 

Answer 1

Ja. React funktioniert mit einem virtuellen DOM-Modell und aktualisiert das echte Browser-DOM nur bei Bedarf. Die Ereignisse in React funktionieren auch auf einem virtuellen DOM und heißen synthetic Ereignisse. Wenn Sie das zugrunde liegende Ereignis auf Browserebene aus irgendeinem Grund benötigen, verwenden Sie einfach das Attribut nativeEvent, um it zu erhalten.

Es gibt einige Einschränkungen in Virtual DOM Reaktion, die Sie von here lesen können:

Auch this kann hilfreich sein, und erklärt den Unterschied zwischen dem virtuellen Dom und Browser DOM.

Browser DOM ist nur eine Abstraktion der Elemente auf der Seite, und React DOM wäre eine Abstraktion dieser Abstraktion.

Die render Methode der ReactDOM ist entscheidend, wie wir reagieren Elemente Browser DOM senden:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var root = React.createElement('div'); 
ReactDOM.render(root, document.getElementById('example')); 
     ^
     |---- Where React elements from React Virtual DOM enter the Browser DOM 

In Reagieren wir mit Elementen reagieren und Reagieren Komponenten handelt.

Da Reagieren Element eine virtuelle Darstellung eines DOM-Element ist, mit den Ereignissen zu arbeiten und die Eltern zu fangen, müssen Sie Komponenten eine dieser drei Arten reagieren erstellen:

Um die Eltern in der Click-Ereignis zum Beispiel navigieren Sie dies überprüfen können:

var parent = this._reactInternalInstance._currentElement._owner._instance; 

REF: is there any way to access the parent component instance in React? und http://jsfiddle.net/BinaryMuse/j8uaq85e/