javascript - 动态渲染的嵌套输入失去了它们的价值

Question

我是新手，react-hook-form并注意到一些我似乎无法阻止的事情。当一个组件被动态渲染时，它的嵌套输入组件的值不会保持它们的值。

我的组件结构是：

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

我可以通过将所有代码放入一个组件并使用 CSS 动态显示它们来解决这个问题。但是，这会产生一个非常大的组件文件，因此要尽量避免这种情况。

注意我感觉这是预期的行为，因为控制器在卸载时取消注册 ref。

score 0 · Accepted Answer

我找到了解决方案。而不是动态呈现组件，而是将显示值传递给组件并将其设置为hiddenHTML 属性。

所以不要这样做：

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

我已经这样做了，它保持了价值观。

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

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

我担心随着表单的增长，这将不是一种可扩展的方法。理想情况下，我会有条件地渲染这些组件，而不是有条件地制作它们hidden。

1 回答 1