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

Question

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

在组件 B 的方法中，我需要为 A 设置状态，或者在 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，但一般情况下并非如此。

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

另一种方法是将状态上移一层，使其作为来自另一个组件（父组件）的 prop 传入，然后在该父组件中包含逻辑，尽管这不太灵活。

Answer 2

通常你将 props 发送到组件，然后你用一个函数处理这些 props，在这种情况下，用一些东西来设置状态，例如：

class B extends React.Component{

   render(){
       <A toUpdateState={this.state.valueB} />
   }
}

class A extends React.Component{

   updateState(){
       this.setState({
           ...this.state,
           valueA: this.props.toUpdateState
       })
   }

   render(){...}
}

如果您在 B 组件中触发状态，A 组件将收到信息。

还有其他方法可以做到这一点，但没有代码很难为您提供不同的解决方案。

Answer 3

想出来 - 添加我自己的 onClick 处理程序（而不是允许 Formik 调用其 handleSubmit 方法） - 我的处理程序然后调用 Formik 的 handleSubmit 并根据返回值更改状态