反应父母对孩子道具传递而不重新渲染

Posted 2023-02-21

【中文标题】反应父母对孩子道具传递而不重新渲染

【英文标题】：React parent to child props passing without rerender

【发布时间】：2021-08-26 07:14:59

【问题描述】：

我的父组件上有一个按钮，子组件中有一个第三方表单。当用户单击按钮时，子组件中的保存功能应该运行。这是我的计划。

我试过的方法一： 1.在父级上创建了一个名为save的变量。 2.当按钮被点击时，save变为true 3.保存作为道具传递给孩子 4. Child 包含一个 useEffect() 监听 props.save 的变化 5.如果props.save为true，则运行子组件的保存功能

我试过的方法二：

我没有传递 props，而是创建了一个 react-redux 存储。 store 包含默认为 false 的保存变量 当点击按钮时，redux 中的保存变为 true 我使用 useSelector() 挂钩来监听子组件内部的保存变量更改 UseEffect 用于在检测到值更改时运行 save() 函数

这两种方法发生的情况是我丢失了子组件中的数据，因为父组件中的变量更改导致页面刷新。因此，我想将数据传递给孩子，而不会导致重新渲染。我有哪些选择？

提前致谢

【问题讨论】：

没有选项，因为您的孩子需要从 false - true 更新的值。除非您重新渲染，否则这不会发生

当父组件中的按钮被点击时，我必须有什么选项来触发我的子组件中的 save() 函数？

正如我所说，没有其他选项 AFAIK 。如果必须有什么东西，那么我很确定它是一个 hack。但我不知道:-(

那么这里有什么问题，你在子组件中的表单被清除了？

我已经为这个问题苦苦挣扎了很长时间。这是要求的一部分：（我见过 Shopify 商店管理面板具有类似的功能。表单组件外的按钮

【参考方案1】：

感谢@Shyam，我终于可以解决这个问题了！

我假设useState 和props 导致渲染是正确的。正如@Shyam 建议的那样，没有直接的方法可以避免它。

我在我的项目中使用 react-editor-js，这就是导致问题的原因

  <EditorJs
    instanceRef=()=>//code to save the reference as state variable
    enableReInitialize
    data=
    tools=EDITOR_JS_TOOLS
  />

状态丢失的原因是我的instanceRef 在每次组件呈现时都被重新分配。

可以通过使用useCallback()包装将引用保存为状态变量的方法来防止这种重新分配