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

容器/你好/你好从“反应”导入React

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

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

1 个答案: