小编dav*_*geo的帖子

我正在尝试集成 Hotjar 库来跟踪我们 React SPA 中用户的热图。

我已经遵循了一般教程，但我无法使其正常工作。

我在文档的元素中有标准的 Hotjar 跟踪代码。

我正在使用高阶组件来连接 React 路由器并尝试调用 window.hj('stateChange', page) 和 window.hj('vpv', page) 但这些都没有记录在 Hotjar 热图中。

这是 HOC 的代码：

import React, { Component } from 'react';
import GoogleAnalytics from 'react-ga';

GoogleAnalytics.initialize(process.env.REACT_APP_GA_TRACKING_ID);

const withPageViewTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    console.log('window.hj', window.hj);
    console.log('page', page);
    // window.hj('stateChange', page);
    window.hj('vpv', page);
  };

  const HOC = class extends Component {
    componentDidMount() {
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage …

我在项目中使用Material UI Drawer组件.

我有一个iPad的特定问题,据我所知,导致两个问题: - 叠加没有出现在导航栏和正文内容之上 - 抽屉没有出现在叠加层的顶部

据我所知,这似乎是与z指数相关的问题; 可能与"transform:translateZ(0px);"的使用有关

这是叠加层的渲染html:

<div style="position: fixed; height: 100%; width: 100%; top: 0px; left: 
0px; opacity: 1; background-color: rgba(0, 0, 0, 0.541176); -webkit-
tap-highlight-color: rgba(0, 0, 0, 0); will-change: opacity; transform: 
translateZ(0px); transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 
0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; z-index: 1200; 
pointer-events: auto;"><!-- react-empty: 149 --></div>

这是抽屉的主要div渲染html:

<div style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); 
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box- …