javascript - react组件如何传值给上一个页面组件

Question

我有两个组件，FormComponent 和 OrderListComponent。 FormComponent 上有一个字段要求用户从来自 OrderListComponent 的列表中选择一个值。所以我在 FormComponent 的字段上放了一个按钮，当用户单击该按钮时，我使用 router.push('XXXX') 将页面导航到 OrderListComponent 以向用户显示所有选项。当用户单击 OrderListComponent 上的其中一个选项时，我使用 router.goBack() 返回到 FormComponent。问题来了，FormComponent 如何从 OrderListComponent 中获取选中的值？我知道我可以将选择保存为 redux store 中的状态，但我想知道是否有更直接的方法来解决这个问题。

Answer 1

最好的方法是拥有状态管理器。 Redux 状态将优雅地解决它。虽然作为 Random User mentioned in his answer ; localStorage/sessionStorage 可用于执行此操作。

但是当为 Order 选择的项目太多时，通过 URL 传递值将很棘手。

状态可以更改，因此状态中的任何内容都会在 OrderListCompoennt 处提供一致的输出。

您可以拥有订单状态并将项目推送到该状态。然后将用户重定向到 OrderListComponent 而不是执行 router.push('XXXX')。

OrderListComponent 将观察状态并相应地显示项目。

FormComponent 还将监视订单状态以标记当前添加的项目。这样就不会再有router.goBack();只是 router.push

的重定向

当您的应用位于 FormComponent 时，订单状态将自动负责标记当前已订购的项目。