Динамически отображаемые вложенные входы теряют свою ценность

Question

Я новичок в использовании react-hook-form и заметил что-то, что я не могу предотвратить. Когда компонент визуализируется динамически, значение его вложенных входных компонентов не содержит их значения.

Моя структура компонентов:

  ParentComponent
    --> ChildComponent(s)
      --> Controller component (supplied via react-hook-library)

Вот песочница для воспроизведения проблемы - https://codesandbox.io/s/flamboyant-http-i574n.

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

Примечание. У меня такое ощущение, что это ожидаемое поведение, поскольку контроллер отменяет регистрацию ссылки при ее отключении.

Answer 1

Я нашел решение для этого. Вместо динамического рендеринга компонента вместо передачи значения show компоненту и установки его в атрибут hidden HTML.

Поэтому вместо того, чтобы делать это:

//ParentComponent
return (
   {displayInput && <CustomInput />}
)

Я сделал это, и он сохраняет значения.

//ParentComponent
return <CustomInput hidden={!displayInput} />

//CustomInput
return (
  <section hidden={hidden}>
    //content
  </section>
)

У меня есть опасение, что по мере роста формы, это не будет масштабируемым подходом. В идеале я бы условно отобразил эти компоненты, а не сделал бы их условно hidden.