Jestem nowy w używaniu klas ES6 z React, wcześniej wiązałem swoje metody z bieżącym obiektem (pokaż w pierwszym przykładzie), ale czy ES6 pozwala mi na stałe powiązać funkcję klasy z instancją klasy za pomocą strzałek? (Przydatne przy przekazywaniu jako funkcja oddzwaniania). Występują błędy, gdy próbuję ich użyć w sposób możliwy z CoffeeScript:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
Gdybym więc miał przejść SomeClass.handleInputChange
do, na przykład setTimeout
, byłby objęty zakresem instancji klasy, a nie window
obiektu.
Odpowiedzi:
Twoja składnia jest nieco wyłączona, po prostu brakuje znaku równości po nazwie właściwości.
To jest funkcja eksperymentalna. Musisz włączyć funkcje eksperymentalne w Babel, aby to skompilować. Oto demo z włączoną funkcją eksperymentalną.
Aby użyć eksperymentalnych funkcji w Babel, możesz zainstalować odpowiednią wtyczkę tutaj . Do tej konkretnej funkcji potrzebujesz
transform-class-properties
wtyczki :Więcej informacji na temat propozycji pól klas i właściwości statycznych można znaleźć tutaj
źródło
=
ohandleInputChange =
Nie, jeśli chcesz utworzyć powiązane metody specyficzne dla instancji, musisz to zrobić w konstruktorze. Możesz jednak użyć do tego funkcji strzałek zamiast
.bind
metody prototypowej:Istnieje propozycja, która może pozwolić ci pominąć
constructor()
i bezpośrednio umieścić zadanie w zakresie klasy o tej samej funkcjonalności, ale nie zalecałbym używania tego, ponieważ jest to wysoce eksperymentalne.Alternatywnie można zawsze użyć
.bind
, co pozwala zadeklarować metodę na prototypie, a następnie powiązać ją z instancją w konstruktorze. To podejście ma większą elastyczność, ponieważ pozwala modyfikować metodę z zewnątrz klasy.źródło
Wiem, że odpowiedź na to pytanie jest wystarczająca, ale mam tylko niewielki wkład (dla tych, którzy nie chcą korzystać z funkcji eksperymentalnej). Z powodu problemu z wiązaniem wielu powiązań funkcji w konstruktorze i powodowania bałaganu, wymyśliłem metodę narzędzia, która raz powiązana i wywołana w konstruktorze, automatycznie wykonuje wszystkie niezbędne wiązania metod.
Załóżmy, że mam tę klasę z konstruktorem:
Wygląda niechlujnie, prawda? Teraz stworzyłem tę metodę narzędzia
Teraz muszę tylko zaimportować to narzędzie i dodać wywołanie do mojego konstruktora, i nie muszę już wiązać każdej nowej metody w konstruktorze. Nowy konstruktor wygląda teraz na czysty:
źródło
shouldComponentUpdate
igetSnapshotBeforeUpdate
Używasz funkcji strzałki, a także wiążesz ją w konstruktorze. Nie trzeba więc wiązać podczas korzystania z funkcji strzałek
LUB musisz powiązać funkcję tylko w konstruktorze, gdy używasz normalnej funkcji, jak poniżej
Nie jest również zalecane wiązanie funkcji bezpośrednio w renderowaniu. Zawsze powinien być konstruktorem
źródło