リスト要素が表示されているかどうかを確認する方法、はいの場合は何らかの処置をとる

Question

Reactを使用してサイドパネルに通知リストを表示していますウェブページ上のウィンドウ。 （添付写真参照）

通知がユーザーによって表示されているかどうかを確認する必要があります。したがって、通知がユーザーのビューに入ると、Ajaxコールを介してサーバーに通知されたことを通知するイベントが発生します。

ここで、いくつかのフォーラムで、ページ要素が表示されているかどうかを確認する方法をいくつか紹介します。

しかし、私の心配と疑問は、ReactJSで標準化された方法でそれをうまくやり遂げる方法であり、jQueryのアプローチを使用せずに行っても大丈夫ですか？

Answer 1

どのようにこれらの要素をレンダリングしていますか。 @gyzerokはcomponentDidMountにAJAX呼び出しを追加するだけです（それぞれの行は独自のAJAX呼び出しを持つことができます）ので、すべての通知ボックスに通知AIDを送信するグループAJAXを含めることができます。 1回の呼び出しで何でも）。

一方、前にレンダリングされている場合（非表示の場合のみ、もう少し複雑になる可能性があります）。おそらく、あなたは誰かが通知を見たと思うかもしれないと思っているので）、または開いている通知（おそらくいくつかのボタンであなたを開くことはできますか？）で、Clear All（すべてクリア）のアクションを設定する必要があります。

これは私の解決策です。最初のものは私のためにもっと "クリア"です。

編集：行ごとに
別々の（そしてそれがウィンドウ内に表示されているかどうかをチェックする）、あなたはまた、 github.com/joshwnj/react-visibility-sensor または類似のようなツールを使用することができます。要素がウィンドウ内に表示されているかどうかを追跡しています（onChange関数では、AJAXを起動する関数を書くことができます）

Answer 2

あなたのコンポーネントは、DOMにマウントされた後、実際にすべきです。したがって、componentDidMountライフサイクルフックを使用して、コンポーネントが実際にユーザに提示されたかどうかを知ることができます。