React 高阶组件语法

Question

概述

当涉及到用高阶组件包装反应组件以访问道具时，我很难理解我在网上找到的语法。

以下示例（有效）我将使用

包装组件

withFireStore => ReduxForms => Connect => Component

export default withFirestore(
    reduxForm({
        form: "createStudents", validate
    })(connect(
          mapStateToProps,
          mapDispatchToProps)(CreateStudentsForm))
);

我正在尝试做的事情的背景

最终，我试图通过我作为 revalidate.js 库的一部分使用的验证函数来访问道具。当遵循解决方案时，我没有从 ownProps 获得映射到状态的道具。我相信这是由于我如何订购我的高阶组件。

问题

我实际上需要连接包装的 ReduxForm，以便它可以访问我从 redux 状态映射的道具。

withFireStore => Connect => ReduxForms => Component

Attempt 1

export default withFirestore(
    (connect(
            mapStateToProps,
            mapDispatchToProps
        )
        (reduxForm({
            form: "createStudents", validate
        }))
        (CreateStudentsForm)
    )
);

错误

Cannot call a class as a function

我以为我把括号放在了错误的位置，但是当我像这样移动它们时我得到了

Attempt #2

export default withFirestore(
    (connect(
            mapStateToProps,
            mapDispatchToProps
        )
        (reduxForm({
            form: "createStudents", validate
        })
        (CreateStudentsForm))
    )
);

错误

Uncaught Invariant Violation: You must pass a component to the function returned by connect.

问题

我觉得像这样的链接函数很混乱，有没有更好的写法？
我该如何写才能让 reduxFrom 被 connect 包裹，这样我就可以访问我的表单中的道具。

添加到问题：

CreateStudentForm.js 进口

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import {compose} from 'redux';
import { Container, Form, Col, Button } from "react-bootstrap";
import MaterialIcon from '../../material-icon/materialIcon';
import { withFirestore } from "react-redux-firebase";
import { connect } from "react-redux";
import TextInput from "../../forms/textInput";
import { combineValidators, isRequired } from "revalidate";
import { setupStudentForm } from '../../../store/actions/students';

CreateStudentForm 被导入到名为 modal.js

的有状态组件中

Modal.js 进口

import React, { Component } from "react";
import { connect } from "react-redux";
import { Modal, Button, Row, Col } from "react-bootstrap";
import Aux from '../../hoc/Aux';
import CreateClassForm from "../createClass/createClassForm";
import EditClassForm from "../editClass/editClassForm";
import EditHomeworkForm from "../editHomework/editHomeworkForm";
import CreateHomeworkForm from "../createHomework/createHomeworkForm";
import CreateStudentsForm  from "../createStudents/createStudentsForm";
import { withFirestore } from "react-redux-firebase";

Answer 1

试试 compose，比如：

export default compose(
  withFirestore, 
  reduxForm({
    form: "createStudents", validate
  }),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(CreateStudentsForm);

React 高阶组件语法

React Higher Order Components syntax

reactjs

redux

redux-form

recompose

概述

我正在尝试做的事情的背景

问题

问题

添加到问题：

CreateStudentForm.js 进口

Modal.js 进口