Reagieren: Element Attribut Methode

Question

Ich habe dieses div erhalten:

<div className="item #{ @test() }" data-value="1"> 

und whant Zugang in Methode, um Daten-Attribut zu erhalten:

test: -> 
console.log ($(this).data("value")) 

Aber ich bekomme diese anstelle des Elements:

Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…} 

Answer 1

Behandeln Sie Ihre DOM-Knoten nicht als Quelle der Wahrheit.

Die Form eines DOM-Knotens in React sollte immer sein, abgeleitet von aus den Daten, die über Requisiten an eine Komponente übergeben werden, oder als Teil des internen Status beibehalten werden.

Angenommen, dass das Verfahren für die Komponente machen, die das Tag wie folgt aussieht macht:

return (
    <div className={`item ${this.test()}`} data-value="1"></div> 
); 

In diesem Fall wir hartzucodieren Daten-Wert-Attribut als "1". Das ist nicht besonders nützlich, es ist wahrscheinlicher, dass wir einen Wert aus den Requisiten der Komponente verwenden.

const { value = 1 } = props; 

return (
    <div className={`item ${this.test()}`} data-value={value}></div> 
); 

Jetzt können wir die Klassennamen programmatisch mit diesem Wert bauen, anstatt zu versuchen, in den DOM-Knoten hook it out zurück zu bekommen.

const { value = 1 } = props; 
return (
    <div className={`item ${this.test(value)}` data-value={value}></div> 
);