У меня есть компонент, обернутый с использованием формы ES + предложил синтаксис декоратора для HOC подключения react-redux:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import RegisterForm from './register-form';
import { registerUser } from '../store/api/Auth/actions';
@connect(null, { registerUser: registerUser })
export default class RegisterPage extends Component {
handleSubmit = values =>
this.props.registerUser(values);
render() {
return (
<div>
<h1>Register Here</h1>
<RegisterForm onSubmit = {this.handleSubmit} />
</div>
);
}
}
Я получаю сообщение об ошибке:
Uncaught Error: You must pass a component to the function returned by connect. Instead received {"kind":"class","elements":[{"kind":"field","key":"handleSubmit","placement":"own","descriptor":{"configurable":true,"writable":true,"enumerable":false}},{"kind":"method","key":"render","placement":"prototype","descriptor":{"writable":true,"configurable":true,"enumerable":false}}]}
Я использую Webpack 4 с babel-loader. Мой файл .babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]
]
}
Мне кажется, что целевой объект функции подключения - это класс, но функция подключения получает дескрипторы свойств этого класса. Я понимаю, что команды React и Redux не одобряют декораторов. Это связанный вопрос SO: Ошибка синтаксиса React-Redux @connect
Как заставить работать декоратор @connect?
@markerikson Спасибо за ответ. Видя, как другие используют его, мне любопытно, что мне не хватает, чтобы заставить его работать.
Это постоянно меняющийся ландшафт. Если вы так склонны использовать что-то, что официально не поддерживается, вам нужно приложить дополнительные усилия. Вам нужно будет найти версию babel-plugin-transform-decorators (или -legacy), которая может заставить эту работу работать. Возможно, вам также придется найти соответствующие версии других плагинов babel, которые могут работать в экосистеме что. Однако преследование этой идеи полезно для науки, так что удачи! :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Убедитесь, что вы вставили плагин декоратора до свойств класса плагина.
{
"plugins": [
"@babel/plugin-proposal-decorators",
"@babel/plugin-proposal-class-properties"
]
}
Вавилон-плагин-предложение-декораторы
Пожалуйста, добавьте некоторую информацию / описание / контекст о связанном ресурсе
Тем не менее, я получаю дескриптор как первый и единственный параметр функции декоратора.
Как вы отметили, мы действительно не рекомендуем использовать декораторы в целом, и в частности использовать
connectв качестве декоратора. Синтаксис декоратора и плагины все еще нестабильны и продолжают меняться.