【问题标题】:How to save page edits on a ReactJS site when navigating from page to page从页面导航到页面时如何在 ReactJS 站点上保存页面编辑
【发布时间】:2021-04-18 03:03:27
【问题描述】:

我有一个基本的 ReactJS 应用程序,有 5 个页面,我认为这是一个 SPA(每个页面与菜单共享一个公共标题元素),每个页面都有自己的路线,我正在制作这样的菜单项:

<Link to="/save">Save</Link> 

为了让问题变得非常简单,假设用户在一个页面上将他的名字输入到一个文本框中。然后用户点击另一个页面,然后点击回到第一页。好吧,当我们回到第一页时,文本框是空的。用 ReactJS 解决这个问题的最常见方法是什么?我不想让文本框被清空。实际上,当在视图之间切换时,我会有很多我不想消失的东西,我宁愿不必编写代码来重新创建所有内容的状态,而是让它仍然存在。

这当然是一个非常基本的问题。即使只是给我一个好的谷歌搜索字符串来为我指明正确的方向也会有所帮助。

【问题讨论】:

  • 也许将值存储在持久状态管理器中?如果没有,也许是 localStorage?
  • 我感觉 ReactJS 中有一些工具可以做到这一点。可能有一个叫做 Context 的东西,也许我没有正确使用它。

标签: reactjs state single-page-application amplify


【解决方案1】:

你描述的问题类似于vue.js中的keep-alive

componentWillUnmount可以使用redux保存页面数据, componentDidMount可以获取页面日期。

或者你可以试试这个React Keep Alive

【讨论】:

  • 我认为 keep-alive 听起来是对我的问题最直接的回答,但它似乎并没有被太多使用。我在网上查看了一些 Redux 信息,乍一看它是多余的,但我会更多地研究它。也有可能隐藏和取消隐藏 HTML 以完成相同的操作(显示:无 | 块;)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多