Wie geben Sie ein Objekt mit einer fetten Pfeilfunktion zurück, ohne es neu zu binden?

Question

Ich habe eine einfache Funktion (innerhalb einer Komponente React):

getInitialState: function() { 
    return { 
    text: this.props.text 
    } 
} 

Aber ich will Fett arrowify es:

getInitialState:() => { 
    text: this.props.text 
} 

außer ich eine Fehlermeldung erhalten, weil ein { nach einem fetten Pfeil Mittel ein Block von Code, der nicht definiert zurückgibt (außer Sie explizit return etwas). Zumindest dachte ich das zuerst. Aber ich denke this wird jetzt an diese fette Pfeilfunktion gebunden und jetzt ist this.propsundefined. So

Ich versuche dies:

getInitialState:() => new Object({ 
    text: this.props.text 
}) 

Aber ich bekomme den gleichen Fehler, this.props nicht definiert ist.

Also ich denke, ich habe 2 Probleme, die ich bin neugierig. Erstens, was ist der idiomatische Weg, um ein Objekt von einer einfachen Anweisung Fettpfeilfunktion zurückzugeben? Zweitens, wie gebe ich ein Objekt zurück, das eine Referenz auf das Objekt this des umgebenden Kontextes hat?

Answer 1

es umgeben mit Klammer, wie diese

getInitialState:() => ({ 
    text: this.props.text 
}) 

ohne die Klammer, auch die Objektliteral sieht aus wie ein JavaScript-Block mit einem Label namens text darin. Da es mehrdeutig ist, wird der SyntaxError ausgelöst. Aber wenn Sie es mit () umgeben, weiß JavaScript, dass es ein Objektliteral ist.

---

Ich denke, das jetzt

Pfeil Funktionen haben nicht this zu diesem Pfeil Funktion gebunden wird. Wenn this in einer Pfeilfunktion angetroffen wird, wird auf die vorherige Ebene gewechselt, um zu sehen, ob this dort verfügbar ist und diese verwendet. Sie können das bestätigen, wie diese

(function Test1() { 
    console.log(this); 
    (() => console.log(this))(); 
}).bind({a: 1})(); 

{ a: 1 } 
{ a: 1 } 

In Ihrem Fall drucken würde, this die this Aufgabe der Funktion beziehen, in der sie deklariert wird, nicht das Objekt selbst.