Как преобразовать функциональный компонент, который использует крючки formik по умолчанию, в компонент класса

#reactjs #react-native

Вопрос:

У меня есть функциональный компонент, который хорошо работает, но по некоторым причинам я хочу преобразовать его в компонент класса, но я замечаю, что в Интернете нет учебника, в котором говорится, как мне работать с крючками formik по умолчанию и несколькими реквизитами.

Вот часть кода, с которой мне трудно справиться:

 export default function BanksList({
  name,
  childToParentBC,
  bankResolve,
  ...otherProps
}) {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [listofBanks, setListOfBanks] = useState([]);

  const { setFieldTouched, setFieldValue, errors, touched, values } =
    useFormikContext();
 

Ответ №1:

Короче говоря, вы не можете использовать какой-либо хук в компоненте класса, они являются эксклюзивными.

Однако это не значит, что вы не можете подшутить, например, обернуть компонент класса, а затем внутри использовать старый компонент функции.

   class ClassComponent {
    render() {
      return <FunctionComponent />
    }
  }
 

ПРИМЕЧАНИЕ: класс и функциональный компонент очень разные, люди склонны их часто сравнивать. Но ИМХО в этом нет необходимости, потому что функциональный компонент-это всего лишь функция, поэтому для сохранения чего-либо он полагается на хуки, которые вообще нельзя использовать в компоненте класса.

Комментарии:

1. Значит, нет никакого способа обойти это?

2. я добавляю к нему немного взлома. однако это может не сработать для вас. Короче говоря, нет быстрого способа, если базовая возможность реализована с помощью крючков.

3. может быть, вы можете немного рассказать нам, почему вы хотели бы вернуться к компоненту класса, потому что большинство людей идут другим путем.

4. На самом деле правда в том, что мне не нужно преобразовывать его в компонент класса (я ненавижу компонент класса), но кто-то прислал мне код, в котором он использовал компонент класса, и теперь мне нужно передать значения дочернему компоненту на другом экране или, по крайней мере, отправить значения компонента класса для сохранения, поскольку он является частью формы.

5. Я задал этот вопрос, потому что хотел посмотреть, как это будет сделано, если это возможно