如何在React中确定是否已查看列表元素，如果是，则执行某些操作

Question

我有一个场景，其中使用React，我在网页的侧窗格窗口中显示通知列表（每个最多300个字符）。 （见附图）

我需要确定用户是否已查看通知。因此，当通知进入用户的视图时，它将引发一个事件，通过Ajax调用通知服务器它已被查看。

现在我知道在不同的论坛上有一些提供的解决方案如何确定页面元素是否在视图中。

但是我的担心和问题是如何在ReactJS中以一种标准化的方式做到这一点并且如果我们在不使用任何jQuery方法的情况下采用它会有很多好处呢？

Answer 1

您的组件实际应该在安装到DOM之后。因此，您可以使用componentDidMount生命周期钩子来了解组件是否实际呈现给您的用户。

Answer 2

我不知道你是如何渲染这些元素的。如果整个通知（行）是单独的组件，正如@gyzerok所提到的那样只需在componentDidMount中添加一个AJAX调用（每行都有自己的AJAX调用，因此每个都会被提及，或者整个通知框可以有组AJAX，它将发送通知ID或无论在一个电话中。）

如果它们在另一方面呈现之前（并且只是隐藏，它可能会更复杂一些）。可能你需要在Clear All上设置一个动作（因为当你关闭时你可以期待有人看到通知）或打开通知（你可能通过某个按钮打开它们吗？）。

这就是我的解决方案。第一个对我来说更“清晰”。

修改
对于每一行分开（并检查它是否在窗口中可见），那么你也可以使用像这样的工具 github.com/joshwnj/react-visibility-sensor 或类似的。它跟踪元素是否在窗口中可见（然后在onChange函数中，您可以编写一个可以触发AJAX的函数