Babel lança um erro de sintaxe na função de seta - javascript, reactjs, webpack, ecmascript-6, babeljs

Estou tentando me adaptar este código para um pequeno projeto com o React, mas estou tendoproblema, e eu não sei como consertar isso, porque eu não sei se este é o código original ou o meu Babel que está com problemas (como, falta de uma biblioteca ou algo assim), ou se eu não posso porque React .

Então a coisa é que eu tive que adaptar algumas funções porque de outra maneira a Babel lançaria um sinal inesperado nelas, ou seja,

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

passou a ser

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

e isto:

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

tornou-se isso:

handleRequestSort(event, property) { ... }

Para o meu problema principal, substituí isto:

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

por este

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

No entanto, se eu clicar na seta na mesa que aciona a alteração da ordem, recebo cannot read props of undefined. Caso contrário, recebo `token inesperado" = ", conforme escrito no meu código.

Então, minha pergunta é a seguinte: é o código original de buggy, é minha babel ou é outra coisa? Eu estou atualmente em uma base Rails com webpacker, mas eu não acredito que esta é a razão pela qual eu tenho esses problemas.

Respostas:

3 para resposta № 1

Você está perdendo o babel-plugin-transform-class-properties plugin para transformar as propriedades da classe que é sintaxe experimental (daí o token inesperado =). Inclua isso na configuração do Babel se você quiser usar propriedades de classe para propTypes e funções de seta de propriedade de classe. O segundo erro, esse this.props é indefinido é porque você está usando uma função regular que this não se refere ao componente. Retorna uma função de seta:

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

---