Javascript 动态呈现的嵌套输入将丢失其值

我对使用

react-hook-form

很陌生，注意到一些我似乎无法阻止的事情。动态呈现组件时，其嵌套输入组件的值不会保留其值

我的组件结构是：

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

这里有一个沙箱来重现问题-

我可以通过将所有代码放在一个组件中并使用CSS动态显示来解决这个问题。然而，这将导致一个非常大的组件文件，所以要尽量避免这种情况

---

注意，我感觉这是预期的行为，因为控制器在卸载ref时会注销ref

我找到了解决这个问题的办法。而不是动态呈现组件，而是将显示值传递给组件，并将其设置为

hidden

HTML属性

因此，与其这样做，不如：

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

//父组件
返回(
{displayInput&&}
)

我已经这样做了，它保留了这些值

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

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

//父组件
返回
//自定义输入
返回(
//内容
)

我担心随着表单的增长，这将不是一种可伸缩的方法。理想情况下，我会有条件地呈现这些组件，而不是有条件地将它们隐藏起来