javascript - 访问包装 HOC 中组件的功能/状态

Question

所以我有一个组件 A(扩展了 React.component)，它被一个更高阶的组件 B 包裹着。

在组件 B 的方法中，我需要为 A 设置 State，或者调用 A 中的函数(以便它可以执行 setState) - 这通常是如何完成的？

我可以在此处粘贴实际代码，但我认为如果有处理这种情况的标准方法，事情可能会变得复杂。

编辑:这里是代码 - isOpen 需要更改才能关闭模态框，并且需要在handleSubmit 中更改...

import React from 'react';
import Modal from 'react-modal';
import { withFormik, Form, Field } from 'formik';
import Yup from 'yup';

// first part of Formik integration
const formikEnhancer = withFormik({
  mapPropsToValues(props) {
    return {
      personName: props.email || '',
      personSurname: props.surname || '',
      personCongregation: props.congregation || ''
    }
  },
  validationSchema: Yup.object().shape({
    personName: Yup.string().required().min(1),
    personSurname: Yup.string().required().min(2),
    personCongregation: Yup.string().required().min(8)
  }),
  handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
    submitNewPerson(values, {resetForm, setErrors, setSubmitting});
    props.testCall;
  }
});

function submitNewPerson(v, {resetForm, setErrors, setSubmitting}) {
  //e.preventDefault();

  congregations = [];
  congregations.push(v.personCongregation);

  const peep = {
    name: v.personName,
    surname: v.personSurname,
    congregations: congregations//,
    //startDate: Number(e.target.componentStartDate.value),
    //endDate: Number(e.target.componentEndDate.value)
  };
    // do the db insert here and check for errors
    setSubmitting(false);
  });
};

class AddPerson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: undefined,
      isOpen: false
    }
  }

  componentWillMount() {
    Modal.setAppElement('body');
  }

  renderCong() {
    // this just maps out a list of select options
  }

  render() {
    return (
      <div>
        <button className="button" onClick={()=> this.setState({isOpen:true, error:undefined})}>+ Add Person</button>
        <Modal isOpen={this.state.isOpen} contentLabel="Add Person"
          className = "boxed-view__box" overlayClassName="boxed-view boxed-view--modal">
          <Form className="boxed-view__form">
            <div>
              <Field type="text" name="personName" placeholder="Name" />
            </div>
            <div>
                <Field type="text" name="personSurname" placeholder="Surname" />
            </div>
            <div>
             <Field component="select" name="personCongregation" value={this.state.cong}>
                <option key="0" value="">- Select Option -</option>
                {this.renderCong()}
              </Field>
            </div>
            <button disabled={this.props.isSubmitting} className="button">Add Person</button>
            <button disabled={this.props.isSubmitting} type="button" className="button button--secondary" onClick={
              ()=> {
                this.props.resetForm();
                this.setState({isOpen:false});
              }}>Cancel</button>
          </Form>

        </Modal>
      </div>
    )
  };
};

Answer 1

除非你能控制组件 B，否则这是不可能的。一些流行的 HOC(例如 React-Redux 中的 connect)有一种机制，允许您公开包装的组件 A，但通常情况并非如此。

通常最好不要这样做。如果需要从外部更改组件的状态，则应将其作为 prop 传入，并且“事实来源”应该是您的模型或 View 模型。如果您使用的是 redux 之类的东西，请尝试将组件状态移至 redux 状态，而不是调用 setState，而是使用 redux 操作/reducer 组合来更新它。

另一种方法是将状态向上移动一个级别，以便它作为 Prop 从另一个组件(父组件)传入，然后在该父组件中拥有逻辑，尽管这不太灵活。