如何在 React 中确定列表元素是否已被查看，如果是，则采取一些措施
How to make sure in React, whether a list element has been viewed and if yes then take some action
我有一个场景，其中使用 React，我在网页的侧窗格 window 中显示通知列表（每个最多 300 个字符）。 （见附图）
我需要确定用户是否查看了通知。因此，当通知进入用户视图时，它会引发一个事件，通过 Ajax 调用通知服务器它已被查看。
现在我知道在不同的论坛上有一些关于如何确定页面元素是否在视图中的解决方案。
但我的担忧和问题是如何在 ReactJS 中以标准化的方式巧妙地做到这一点，如果我们不使用任何 jQuery 方法就去做，这会很好吗？
您的组件实际上应该在安装到 DOM 之后。因此，您可以使用 componentDidMount 生命周期挂钩来了解组件是否实际呈现给您的用户。
我不知道你是如何渲染这些元素的。如果整个通知（行）是单独的组件，正如@gyzerok 提到的，只需在 componentDidMount 中添加一个 AJAX 调用（每行可以有自己的 AJAX 调用，所以每个都会被提及，或者整个通知框可以有组 AJAX 将在一次调用中发送通知 ID 或其他内容）。
另一方面，如果它们之前已渲染（并且仅隐藏，则可能会更复杂一些）。可能您需要在“全部清除”（因为当您关闭时您可能会看到通知）或“打开”通知（您可能通过某个按钮打开它们是不是？）上设置一个操作。
这就是我的解决方案。不过第一个对我来说更 "clear"。
编辑：
对于每一行分开（并检查它是否在 window 中可见）然后你也可以使用像这样的工具
github.com/joshwnj/react-visibility-sensor
或类似的。它正在跟踪元素是否在 window 中可见（然后在 onChange 函数中你可以编写一个函数来触发 AJAX
我有一个场景，其中使用 React，我在网页的侧窗格 window 中显示通知列表（每个最多 300 个字符）。 （见附图）
我需要确定用户是否查看了通知。因此，当通知进入用户视图时，它会引发一个事件，通过 Ajax 调用通知服务器它已被查看。
现在我知道在不同的论坛上有一些关于如何确定页面元素是否在视图中的解决方案。
但我的担忧和问题是如何在 ReactJS 中以标准化的方式巧妙地做到这一点，如果我们不使用任何 jQuery 方法就去做，这会很好吗？
您的组件实际上应该在安装到 DOM 之后。因此，您可以使用 componentDidMount 生命周期挂钩来了解组件是否实际呈现给您的用户。
我不知道你是如何渲染这些元素的。如果整个通知（行）是单独的组件，正如@gyzerok 提到的，只需在 componentDidMount 中添加一个 AJAX 调用（每行可以有自己的 AJAX 调用，所以每个都会被提及，或者整个通知框可以有组 AJAX 将在一次调用中发送通知 ID 或其他内容）。
另一方面，如果它们之前已渲染（并且仅隐藏，则可能会更复杂一些）。可能您需要在“全部清除”（因为当您关闭时您可能会看到通知）或“打开”通知（您可能通过某个按钮打开它们是不是？）上设置一个操作。
这就是我的解决方案。不过第一个对我来说更 "clear"。
编辑：
对于每一行分开（并检查它是否在 window 中可见）然后你也可以使用像这样的工具
github.com/joshwnj/react-visibility-sensor
或类似的。它正在跟踪元素是否在 window 中可见（然后在 onChange 函数中你可以编写一个函数来触发 AJAX