如何使用 React.Context 进行事件跟踪

Question

我正在尝试为我的 react 应用程序创建一个通用事件跟踪组件。我的总体想法是有一个全局事件侦听器，它将使用 html 属性来跟踪事件并根据触发的事件触发事件处理程序（单击、提交等）。我想使用 React.Context api 来跟踪页面级数据以用于跟踪目的。

我遇到的问题是在这个用例中弄清楚如何使用 React.Context api。这是我想我会使用的基本结构：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Switch, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './lib/store'
import history from './lib/history'

import Login from './Containers/Login/Login'
import Logout from './Containers/Login/Logout'
import Hello from './Containers/Hello/Hello'
import AnalyticsProvider from './lib/tracking/AnalyticsProvider'

ReactDOM.render((
    <Provider store={store}>
        <AnalyticsProvider>
            <Router history={history}>
                <Switch>
                    <Route path={'/login'} component={Login}  />
                    <Route path={'/logout'} component={Logout} />
                    <Route path={'/hello'} component={Hello} />
            </Router>
        </AnalyticsProvider>
    </Provider>
), document.getElementById('root'))

lib/tracking/AnalyticsProvider.js

import React from 'react'

class AnalyticsProvider extends React.Component {

    componentDidMount() {
        _initClickHandler()
        _initSubmitHandler()
    }

    _initClickHandler = () => {
        window.addEventListener('click', _handleClick, false)
    }

    _initSubmitHandler = () => {
        window.addEventListener('submit', _handleSubmit, false)
    }

    _handleClick = () => {
        // Handle adding click event to analytics manager here
        console.log('Click Event fired')
    }

    _handleSubmit = () => {
     // Handle adding submit event to analytics manager here
        console.log('Submit event fired')
    }

    render = () => this.props.children
}

export default AnalyticsProvider

容器/Hello/Hello 从“反应”导入反应

class Hello extends React.Component {

  constructor(props) {
      this.state = {
          isHidden: true, 
          testData: 'Some sample data'
      }
  }

  render() {
    return (
      <div className="hello-component">
        { this.state.isHidden ? '' : 'Hellow'}
        <button data-analytics-name="TEST_HELLO" onClick={ () => this.setState({isHidden: !this.state.isHidden})) }>Toggle Hello</button>
      </div>
    );
  }
}

因此，从概念上讲，在 _handleClick 方法中，我希望能够在单击“切换 Hello”按钮时从 Hello 组件访问上下文数据。

我不知道如何以这种方式设置我的组件。有什么想法吗？或者一般来说有什么更好的通用分析捕获方法？

Answer 1

您尝试从 Hello 组件访问哪些上下文数据？是data-analyticsName吗？您可以像这样轻松访问AnalyticsProvider 中的数据属性：

  _handleClick = e => {
    // Handle adding click event to analytics manager here
    if (e.target.dataset.analyticsName) {
      console.log(
        "Click event fired with data " + e.target.dataset.analyticsName
      );
    }
  };

这是您的代码，有一些小的改动：https://codesandbox.io/s/elastic-spence-6fyu1