gpt4 book ai didi

javascript - React-redux connect HOC 作为类装饰器,@connect

转载 作者:行者123 更新时间:2023-11-29 15:12:49 27 4
gpt4 key购买 nike

我有一个使用 react-redux 的连接 HOC 的 ES+ proposed decorator syntax 形式包装的组件:

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 syntax error

如何让@connect 装饰器工作?

最佳答案

确保在插件类属性之前注入(inject)装饰器插件

{
"plugins": [
"@babel/plugin-proposal-decorators",
"@babel/plugin-proposal-class-properties"
]
}

babel-plugin-proposal-decorators

关于javascript - React-redux connect HOC 作为类装饰器,@connect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52611351/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com