[英]React-redux connect HOC as a class decorator, @connect
我有一個組件使用ES +建議的deco-redux連接HOC的裝飾器語法形式包裝:
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}}]}
我正在使用帶有babel-loader的Webpack 4。 我的.babelrc文件是:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]
]
}
在我看來,connect函數的目標對象是類,但connect函數正在接收該類的屬性描述符。 我知道React和Redux團隊不鼓勵裝飾者。 這是一個相關的SO問題: React-Redux @connect語法錯誤
如何讓@connect裝飾器工作?
確保在插件類屬性之前注入裝飾器插件
{
"plugins": [
"@babel/plugin-proposal-decorators",
"@babel/plugin-proposal-class-properties"
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.