使用HOC时在子函数中获取道具

Question

我正在尝试制作一个可以处理一些功能的HOC，并且正在创建我的HOC

import React, { useState } from "react";

export default function withFormControl(WrappedComponent) {
  return props => {
    const onChangeField = e =>
      setFields({ ...fields, [e.target.id]: e.target.value });

    const [fields, setFields] = useState({});

    const submitForm = e => {
      console.log(fields);
      e.preventDefault();
    };

    return (
      <WrappedComponent
        onChangeField={onChangeField}
        submitForm={submitForm}
        fields={fields}
        {...props}
      />
    );
  };
}

我在这样的组件中使用它：

    import React, { useState } from "react";
    import { Col, Form, FormGroup, Label, Input, Button } from "reactstrap";

    import { Typo, Ico, AuthLayout } from "../../../components";

    import "./Applicant.css";
    import FormInput from "../../../components/common/FormInput/FormInput";
    import withFormControl from "../../../hocs/WithFormControl";

    function Applicant(props) {
      console.log(props); // I get the props here 
      const subFunction = props => {
        console.log(props); // returns undefined
      }
    }
    export default withFormControl(Applicant);

我无法在内部函数中获得道具，这种行为有任何原因吗？

Answer 1

问题在于被称为subFunction的函数的参数是外部范围的影子变量，然后调用subFunction而没有任何参数。