我正在尝试为网站构建用户重播会话功能,并且我正在使用rrweb库来做到这一点。
这个库的作用是在录制时:它捕获网页中的所有事件,我可以通过将它们存储在 an 中来保存这些事件,array当我想重播会话时,我只需将 传递array给重播函数即可函数处理会话重放。
目前,出于测试目的,我将此数组保存在 my 中sessionStorage,每次发出新事件时,我都会将array新事件推送到其中,然后array再次将其保存在 my 中,sessionStorage如下所示:
rrweb.record({
emit(event) {
const sessions = JSON.parse(sessionStorage.getItem('sessions')) || [];
sessions.push(event);
sessionStorage.setItem('sessions', JSON.stringify(sessions));
},
});
Run Code Online (Sandbox Code Playgroud)
但是,对于生产,sessionStorage我不想将该数组保存在我的数组中,然后在每次发出新事件时更新它,而是想将该数组保存array在我的数据库中,并且我想调用将其保存array到我的数据库中的函数,无论何时用户logs out或当用户决定关闭网站时(例如按下按钮X)。
第一部分 - 当用户时logs out- 非常简单,我只需在按钮eventListener上添加一个logout,这是第二部分 - 当用户决定关闭网站时 - 这让我有些头痛。
我知道有这个beforeUnload事件,但是经过快速搜索后,我清楚地意识到它是不可靠的,所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站,这样我就可以触发一个async function将保存array到我的数据库。
我正在尝试在项目中使用react-date-pickernext.js。
我首先安装软件包:npm install react-date-picker
然后在我的_app.js文件中添加:
import "react-date-picker/dist/DatePicker.css";
import "react-calendar/dist/Calendar.css";
Run Code Online (Sandbox Code Playgroud)
然后在我的自定义组件之一中,我尝试使用日期选择器:
import DatePicker from "react-date-picker";
const [dateValue,setDateValue] = useState(new Date());
<DatePicker value={dateValue} onChange={setDateValue} />
Run Code Online (Sandbox Code Playgroud)
当我运行应用程序并尝试导航到包含日期选择器的页面时,出现以下错误:

我已按照文档进行操作,但仍然收到错误,并且不知道如何修复它。
在我的 React 和 tailwindcss 项目中,我的组件之一中有以下代码片段:
<div className="container">
<div className="grid grid-cols-4 gap-x-2 gap-y-4">
{valueCards.map(
(item,index) => (
<div key={index}>
<ValuesCard description={item.description} isPrimary={index % 2 === 0} />
</div>
)
)}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我要寻找的是首先尝试使所有多余的 div 出现在行的中间,如下所示(请注意,我不介意使用纯 css 而不是 tailwindcss 来实现):

我还希望所有卡片的高度都等于其中最大卡片的高度,即使该卡片不在同一行。