Как преобразовать функциональный компонент в компонент класса, если у меня есть эти три строки?

Question

У меня есть RegistrationForm компонент. Это функциональный компонент. Но мне нужно переделать этот компонент в компонент класса.

Я знаю, что компонент класса должен иметь:

• строка как эта: class SignupForm extends React.Component
• метод render()
• в моем случае state вместо useState
• в моем случае метод setState вместо setErrorMessage(res[0].message);

Но у меня все еще есть:

1. const history = useHistory();
2. history.push("/home"); в методе onSubmit
3. const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({ /.. });

И я не знаю, как преобразовать функциональный компонент в компонент класса через эти три строки. Как это сделать?

Небольшая часть RegistrationForm. js:

const SignupForm = () => {

    const history = useHistory();
    const [errorMessage, setErrorMessage] = React.useState(null);
    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
      /........
      },
        validateOnBlur: false,
        /........
        validationSchema: yup.object().shape({ 
          username: yup.string()      
           .required('This field is required'),
       /........
      }),  
     onSubmit: async (formValues) => {
          try {
              const res = await apiFunction('api/auth/register', {
              /........
              });
              if(Array.isArray(res)){              
               setErrorMessage(res[0].message);  
              } else {
                 const token = res.token.token;   
                 localStorage.setItem('myToken', token);     
                 history.push("/home");
             }
          } catch(e) { 
              /........
          } 
       },  
    });

   return (

      <form onSubmit={handleSubmit}>   
     <SignupInput
         /.......
         inputProps={{
           name:'username',
           value: values.username,
           onBlur: handleBlur,
           /.......
            }} error={errors.username} />
      <button type="submit" disabled={isSubmitting}>Submit Form</button>
     </form>
   );
};

Answer 1

Привет, я не уверен, правильно ли я понимаю ваш вопрос и почему вам нужно переписать функциональный компонент в классы.

В классах нельзя использовать реакционные крючки. Вы можете смешивать компоненты класса, которые делают функционал et c.

Но если вам нужно переписать этот компонент, вам понадобится Ho C (компонент React высшего порядка) для этого. Этот компонент Ho C оборачивает ваш фиктивный компонент и передает предметы (history et c) как реквизит.

Например, альтернативой для использованияИстория является Ho C withRouter https://reacttraining.com/react-router/core/api/withRouter

Так что для formik withFormik () https://jaredpalmer.com/formik/docs/api/withFormik

Подробнее о HoC https://reactjs.org/docs/higher-order-components.html

Answer 2

Вы можете сделать функцию-обертку вокруг вашего компонента класса. Это позволяет вам инициализировать хуки внутри оболочки и передавать их вашему компоненту класса. Вот фрагмент кода того, как этого можно достичь.

function hooksWrapper(component) {
  const history = useHistory();
  const formikData = useFormik({ /* pass everything as in your code */ });

  return props => React.createElement(component, {
    ...props,
    history,
    formikData
  }, null);
};

class MyComponent extends React.Component {
  render() {
    const { history, formikData } = this.props;
    const {
      handleSubmit, 
      values, 
      handleChange, 
      errors, 
      handleBlur, 
      isSubmitting, 
      setSubmitting 
    } = formikData;

    ...
  };
}

export default hooksWrapper(MyComponent);