Babel podaje błąd składni w funkcji strzałki - javascript, reactjs, webpack, ecmascript-6, babeljs

Próbuję się przystosować ten kod dla małego projektu z Reactem, ale mam gokłopoty, i nie wiem, jak to naprawić, bo nie wiem, czy to jest oryginalny kod, czy mój Babel, który jest wadliwy (jak, brakuje biblioteki lub czegoś), lub jeśli nie mogę, ponieważ .

Chodzi o to, że musiałem dostosować niektóre funkcje, ponieważ inaczej Babel rzuciłby na nich nieoczekiwany żeton, tj.

static propTypes = { // unexpected "="
onRequestSort: PropTypes.func.isRequired,
onSelectAllClick: PropTypes.func.isRequired,
order: PropTypes.string.isRequired,
orderBy: PropTypes.string.isRequired,
};

stał się

static get propTypes() {
return {
onRequestSort: PropTypes.func.isRequired,
onSelectAllClick: PropTypes.func.isRequired,
order: PropTypes.string.isRequired,
orderBy: PropTypes.string.isRequired,
}
}

i to:

handleRequestSort = (event, property) => { ... } // unexpected "="

stał się tym:

handleRequestSort(event, property) { ... }

Dla mojego głównego problemu, zamieniłem to:

createSortHandler = property => event => { // unexpected "="
this.props.onRequestSort(event, property);
};

przez to

createSortHandler(property) {
return function (event) {
this.props.onRequestSort(event, property);
};
};

Jednak jeśli kliknę strzałkę na stole, która wyzwala zmianę zamówienia, otrzymuję cannot read props of undefined. W przeciwnym razie otrzymam "nieoczekiwany token" = ", jak napisałem w moim kodzie.

Moje pytanie brzmi: to oryginalny bug kodu, czy to mój babel, czy może to coś innego? Obecnie jestem w bazie Railsowej z pakietem webpacker, ale nie sądzę, że to jest powód, dla którego mam te problemy.

Odpowiedzi:

3 dla odpowiedzi № 1

Brakuje ci babel-plugin-transform-class-properties plugin do transformacji właściwości klasy, która jest składnią eksperymentalną (stąd nieoczekiwany token =). Włącz tę opcję w konfiguracji Babel, jeśli chcesz użyć właściwości klasy dla propTypes oraz funkcje strzałki właściwości klasy. Drugi błąd, że this.props jest niezdefiniowany, ponieważ używasz zwykłej funkcji, która this nie odnosi się do komponentu, zamiast tego zwraca funkcję strzałki:

createSortHandler(property) {
return (event) => {
this.props.onRequestSort(event, property);
};
};

---