reactjs – React Redux表单和连接语法

发布时间：2020-12-15 09:32:49 所属栏目：百科来源：网络整理

导读：我有一个React组件 export class Login extends Component { ..omitted for clarity}export default connect(select,actions)(Login); 可以看出它连接到Redux并且它运行得非常好我有Redux表格 export class ChangePassword extends Component { ..omitted f

我有一个React组件

export class Login extends Component {
      ..omitted for clarity
}
export default connect(select,actions)(Login);

可以看出它连接到Redux并且它运行得非常好

我有Redux表格

export class ChangePassword extends Component {
  ..omitted for clarity
}

export default reduxForm({
  form: 'change_password_form',validate
})(ChangePassword);

这再次非常有效.

我的问题是,我无法弄清楚Redux表单也使用connect语句的语法,例如：连接(选择,动作)

像这样的东西？

export default reduxForm({
  form: 'change_password_form',validate
}).connect(select,actions)(ChangePassword)

解决方法

由于connect方法修饰了原始组件,并返回一个修饰组件,因此可以将该组件传递给reduxForm( Redux Form FAQ).

你可以看到一个例子.

const decoratedComponent = connect(select,actions)(ChangePassword)

export default reduxForm({
  form: 'change_password_form',validate
})(DecoratedComponent)

或直接传递：

export default reduxForm({
  form: 'change_password_form',validate
})(connect(select,actions)(ChangePassword))

如果您需要从商店获取数据,例如-to create the form’s initial values from the state,您可以使用redux-form包装原始组件,并传递“form”组件以进行连接：

export default connect(select,actions)(reduxForm({
  form: 'change_password_form',validate
})(ChangePassword))

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!