Передача реквизита компоненту высшего порядка

1

У меня есть компонент FormBuilder высшего порядка, как это:

const FormBuilder = (WrappedComponent) => {
  return class HOC extends React.Component {
    clearForm() { // ... }

    render() {
      return (
        <Form onSubmit={//what do I say here?!}>
           <Form.Input placeholder='Name' name='name' />
           <WrappedComponent clearForm={this.clearForm} />
        <Form>
      );
    }
  }
}

А вот WrappedComponent NewPizzaForm:

class WrappedComponent extends React.Component {
  onSubmit() { // sends a POST request to the backend, then this.props.clearForm() }

  render() {
     return (
       <Form.Button>Add Pizza</Form.Button>
     );
  }
}

const NewPizzaForm = FormBuilder(WrappedComponent);

export default NewPizzaForm;

Поэтому я хочу отправить функцию onSubmit в качестве реквизита из WrappedComponent в FormBuilder чтобы она была доступна для вызова при FormBuilder формы. И причина, по которой я решил определить функцию onSubmit внутри WrappedComponent заключается в том, что у меня есть другой WrappedComponent (использует FormBuilder), в котором есть функция onSubmit но она отправляет запрос PATCH, а не запрос POST. Как мне этого добиться?

  • 0
    Привет, формально HoC это всегда функция, которая возвращает компонент, а не компонент, который возвращает другой компонент
  • 1
    @MosèRaguzzini MosèRaguzzini My FormBuilder - это функция, которая возвращает компонент.
Показать ещё 5 комментариев
Теги:

3 ответа

0

Я совсем не уверен, что это сработает, но, возможно, вы могли бы сохранить результат WrappedComponent формы в состояние HOC, а затем передать эту информацию в WrappedComponent через реквизиты. Затем, используя getDerivedStateFromProps внутри WrappedComponent, вы можете передать отправленную информацию о форме в функцию отправки компонента.

Поделиться
0

Я думаю, что нам может потребоваться немного больше информации о структуре вашего проекта, но вы можете создать функцию внутри FormBuilder (funcA), которую вы передадите в WrappedComponent, который принимает функцию в качестве аргумента. Затем, когда вы нажимаете кнопку внутри WrappedComponent, она отправляет свою собственную функцию onSubmit обратно в funcA, где ее можно использовать в FormBuilder.

Затем его можно использовать в другом WrappedComponent (с запросом POST), так как вы просто отправляете функцию onSubmit из обоих для вызова в FormBuilder.

Надеюсь это поможет.

Поделиться
0

Вы можете действовать следующим образом:

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // The fact that we're returning the original input is a hint that it has
  // been mutated.
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);

В качестве параметра вы можете добавить реквизит "submit" для передачи в метод.

Ссылка: https://reactjs.org/docs/higher-order-components.html#dont-mutate-the-original-component-use-composition

Поделиться
  • 0
    извините, не понимаю вас.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню