jquery - Zachycování událostí v aplikaci React pro analýzu

Snažíme se zachytit všechny události (jako kliknutí na tlačítka a změny v textových polích) v aplikaci React. Cílem je zachytit uživatelské akce, aby bylo možné provést další analýzu uživatelského chování. Nechceme implementovat Google Analytics na úrovni každé komponenty, protože aplikace je velmi rozsáhlá a námaha by byla příliš velká.

Takže zachycujeme události v kořenové React komponentě pomocí jQuery. To nám poskytuje ID toho HTML prvku, který je zodpovědný za generování události. Nyní pomocí tohoto ID máme identifikovat React komponentu, ke které patří, a stavové informace přítomné v té React komponentě. Protože pracujeme s daty tabulky, když je buňka tabulky upravena, pomocí jQuery zjistíme, že tabulka byla upravena, ale abychom odvodili adresu buňky (řádek, sloupec) a další informace, potřebujeme lokální proměnné uložené v té React komponentě.

Proto se snažíme přistoupit k React komponentě. Dejte mi prosím vědět efektivní způsob, jak to udělat.

Zkoušel jsem přistupovat k React fiber pomocí HTML id. Tento proces je složitý, protože React fiber je složitá struktura a všechny informace o stavech nemusí být přítomny v jednom React fiber. Příklad - pokud máme 3 zanořené divy takto

<div id="div-1">
    // header
    <div id= "div-2">
        <div id="div-3">
             //contains a text field
        </div>
    </div>
</div>

Pokud je něco upraveno v div-3, zachytíme s tím spojené React fiber, který nemusí obsahovat všechny informace o stavu. (React fiber spojený s div-1 pravděpodobně bude mít všechny údaje).

Odpověď č. 1

Protože je React složen z komponent, je těžké jej sledovat na základní úrovni. Existuje však další možnost. V tomto bodě byste mohli implementovat vlastní systém událostí.

Nejprve musíte vytvořit kontext, který poskytuje potřebné funkce pro všechny dětské komponenty.

import { createContext, useContext } from 'react';

const EventTrackerContext = createContext();

export const useEventTracker = () => {
  return useContext(EventTrackerContext);
};

Použitím tohoto kontextu můžeme následně poskytnout funkci pro sledování událostí ve všech podřízených komponentách.

Kořenová komponenta nyní může vypadat takto

import { EventTrackerContext } from './EventTrackerContext';

function App() {
  const trackEvent = (event, component, state) => {
    console.log('Event:', event);
    console.log('Component:', component);
    console.log('State:', state);
  };

  return (
    <EventTrackerContext.Provider value={trackEvent}>
      {/* Your application components */}
    </EventTrackerContext.Provider>
  );
}

export default App;

V tomto kontextu je v tomto okamžiku k dispozici funkce trackEvent. V rámci této funkce mohou být nyní tyto události zpracovány (například jejich uložení do API).

Ve všech komponentách, které by měly být sledovány, může být interní systém událostí React použit k jejich předání do funkce trackEvent.

import { useEventTracker } from './EventTrackerContext';

function MyComponent() {
  const trackEvent = useEventTracker();
  const [state, setState] = useState({/* your component state */});

  const handleClick = (event) => {
    trackEvent(event, 'MyComponent', state);
    // Handle the click event
  };

  const handleInputChange = (event) => {
    trackEvent(event, 'MyComponent', state);
    // Handle the input change event
  };

  return (
    <>
      <button onClick={handleClick}>Click me</button>
      <input type="text" onChange={handleInputChange} />
    </>
  );
}

V tomto bodě, když je tlačítko kliknuto nebo když je změněn text v vstupním poli, je volána interní událost funkce mluvícího Reactu.

Jak detailní a v jakém okamžiku by mělo být kolik předáno, lze definovat v metodě trackEvent. Bylo by tedy také možné definovat parametr jako objekt a naplnit jej dalšími daty v závislosti na situaci. Například která tabulka byla kliknuta.