未知道具图案

Question

在下面的代码中，有一种我以前从未见过的编写反应组件的方式，我找不到任何解释。这是我挣扎的下面的片段。

const Reservations = ({
  clearReservations,
  handleSubmit,
  machine,
  saveReservations,
}) => (

我这是在传递道具吗？什么是 handleSubmit？没有任何定义。跟redux-form有关系吗？

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, FieldArray, Form } from 'redux-form';
import { Button, Container, Row, Col } from 'reactstrap';
import _map from 'lodash/map';
import ReactJson from 'react-json-view';

import { WEEK_DAYS } from '../common/constants';
import {
  clearReservations,
  saveReservations,
} from '../actions/machine';
import SingleDayReservations from './SingleDayReservations';
import './Reservations.scss';

const validate = values => {
  const errors = {
    // monday: [{ start: 'must be present' }],
    //tuesday: { _error: 'error' },
  };
  return errors;
};

const Reservations = ({
  clearReservations,
  handleSubmit,
  machine,
  saveReservations,
}) => (
  <Container className="reservations">
    <Form onSubmit={handleSubmit(saveReservations)}>
      <Row>
        <Col xs={8}>
          <h2>Reservations</h2>
          {_map(WEEK_DAYS, day => (
            <FieldArray
              key={`single-${day}`}
              component={SingleDayReservations}
              name={day}
            />
          ))}
          <Button color="primary" type="submit">
            Save data
          </Button>
        </Col>
        <Col xs={4}>
          <ReactJson src={machine} name="machineStoreState" />
          <Button
            onClick={clearReservations}
            color="warning"
            className="reservations__clear-btn"
          >
            Reset Data
          </Button>
        </Col>
      </Row>
    </Form>
  </Container>
);

const mapStateToProps = state => ({
  machine: state.machine,
  initialValues: state.machine,
});

const mapDispatchToProps = {
  clearReservations,
  saveReservations,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(
  reduxForm({
    form: 'reservations',
    validate,
    enableReinitialize: true,
  })(Reservations),
);

handleSubmit 来自 redux-form

Answer 1

您没有将 props 传递给组件，而是使用解构并仅取出您真正需要的那些东西。

和写

一样

const Reservations = (props) => .... 

{ clearReservations,
  handleSubmit,
  machine,
  saveReservations } = props

You can find more about it here

希望对您有所帮助！

Answer 2

在功能组件中，传递的第一个参数是props，您引用的行也可以写成下面的方式。

const Reservations = (props) => {
  const { clearReservations, handleSubmit, machine, saveReservations } = props; // <- Object Destructuring
}

他们在这里做的是在 ES6 中引入的叫做 Object Destructuring 的东西。您可以在此处阅读更多相关信息 ES6 In Depth: Destructuring

Answer 3

这只是destructuring，举个例子：

let someObject = {
  a: 1,
  b: 2,
  c: 3,
};

const destruct = ({ a, b, c }) => {
  console.log(a, b, c);
}

destruct(someObject);

因此，您 "destruct" 一些对象并从该对象获取所需的属性。

未知道具图案

Unknown props pattern

reactjs

redux-form