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

我正在尝试为我的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'))

集装箱/你好/你好 从“React”导入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>
    );
  }
}

类Hello扩展了React.Component{
建造师（道具）{
此.state={
伊希登：没错，
testData:“一些示例数据”
}
}
render（）{
返回(
{this.state.ishiden？'''Hellow'}
this.setState（{ishiden:！this.state.ishiden}））}>切换Hello
);
}
}

因此，从概念上讲，在

\u handleClick

方法中，我希望在单击“Toggle Hello”按钮时能够从Hello组件访问上下文数据

---

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

您试图从Hello组件访问哪些上下文数据？是数据分析程序名吗？您可以在

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
      );
    }
  };

---

下面是您的代码，其中有一些小改动：

您试图从Hello组件访问哪些上下文数据？是数据分析程序名吗？您可以在

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
      );
    }
  };

---

下面是您的代码，其中有一些小改动：

不，对不起，我应该在我的示例中添加更多内容。html属性更能过滤掉应该使用的点击事件。我指的是能够访问组件（如hello）中可能存在的任何数据。所以，如果我有一个state对象，而不是为每个state元素创建html属性，我希望能够通过上下文访问它。这有意义吗？@bos570对不起，我不知道如何提取组件中呈现的数据。另一种选择是

JSON.stringify（）

状态对象，并使用数据属性传递它，就像传递

analyticsName

一样。不，对不起，我应该在我的示例中添加更多内容。html属性更能过滤掉应该使用的点击事件。我指的是能够访问组件（如hello）中可能存在的任何数据。所以，如果我有一个state对象，而不是为每个state元素创建html属性，我希望能够通过上下文访问它。这有意义吗？@bos570对不起，我不知道如何提取组件中呈现的数据。另一种选择是

JSON.stringify（）

状态对象，并使用数据属性传递它，就像传递

analyticsName

一样。