Реагировать синтаксис компонентов высшего порядка - PullRequest
Новая
       27

Реагировать синтаксис компонентов высшего порядка

0 голосов
/ 08 мая 2019

Обзор

Мне трудно понять синтаксис, который я нахожу в сети, когда дело доходит до упаковки реагирующих компонентов компонентами более высокого порядка для доступа к реквизитам.

В следующем примере (который работает) я должен обернуть компонент с

withFireStore => ReduxForms => Connect => Component

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

Справочная информация о том, что я пытаюсь сделать

В конечном итоге я пытаюсь получить доступ к реквизиту через функцию Validate, которую я использую как часть библиотеки revalidate.js. Следуя решению из этого сообщения stackoverflow, я не получаю реквизиты, сопоставленные с состоянием из ownProps. Я считаю, что это связано с тем, как я заказываю компоненты высшего порядка.

Задача

Мне действительно нужен ReduxForm, обернутый соединением, чтобы он мог получить доступ к реквизитам, которые я отображаю из состояния избыточности.

withFireStore => Connect => ReduxForms => Component

Попытка 1 
export default withFirestore(
    (connect(
            mapStateToProps,
            mapDispatchToProps
        )
        (reduxForm({
            form: "createStudents", validate
        }))
        (CreateStudentsForm)
    )
);
ошибка

Cannot call a class as a function

Я думал, что у меня были скобки в неправильных местах, но когда я их сдвигаю, я получаю

Попытка № 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.

Вопросы

  1. Я нахожу цепочечные функции очень запутанными, есть ли лучший способ написать это?
  2. Как мне написать это так, чтобы reduxFrom был обернут соединением, которое должно дать мне доступ к реквизиту в моих формах.

Добавлено к вопросу:

CreateStudentForm.js import 

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 импортируется в компонент Stateful с именем 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";

1 Ответ

1 голос
/ 08 мая 2019

попробуй compose, что-то вроде: 

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