带有Google管理器的ReactJS

Question

我正试图用Google跟踪我的应用程序。我在这里找到了一个包：https://www.npmjs.com/package/react-google-tag-manager，它似乎很受欢迎，但我不知道如何正确配置它，尽管有说明！！

我以网站为例，创建了一个名为google Manager.js的新脚本。

然后，我将其包含在我想要跟踪的页面中：import GoogleTagManager from '../components/google-tag-manager'

然后，我简单地将标记添加到()函数中。

我猜我还没有完全理解，因为我现在收到了一个错误：

TypeError: Cannot read property 'string' of undefined
./src/components/google-tag-manager.js
src/components/google-tag-manager.js:36
  33 | }
  34 | 
  35 | GoogleTagManager.propTypes = {
> 36 |     gtmId: React.PropTypes.string.isRequired,
  37 |     dataLayerName: React.PropTypes.string,
  38 |     additionalEvents: React.PropTypes.object,
  39 |     previewVariables: React.PropTypes.string,

我是错过了什么还是做错了什么？

谢谢

附带问题：

proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
printWarning @ warning.js:33
warning @ warning.js:57
mountIndeterminateComponent @ react-dom.development.js:10439
beginWork @ react-dom.development.js:10601
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
(anonymous) @ base.js:29
Promise resolved (async)
componentDidMount @ base.js:23
commitLifeCycles @ react-dom.development.js:11505
commitAllLifeCycles @ react-dom.development.js:12294
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12415
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
./src/index.js @ index.js:20
__webpack_require__ @ bootstrap 6f791d33f885679fccb8:669
fn @ bootstrap 6f791d33f885679fccb8:87
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 6f791d33f885679fccb8:669
./node_modules/add-dom-event-listener/lib/EventBaseObject.js.Object.defineProperty.value @ bootstrap 6f791d33f885679fccb8:715
(anonymous) @ bundle.js:719

Answer 1

React.PropTypes -现在与react分离了，所以有另一个PropTypes包。

您将需要

1. 安装丙型包装
2. 将proptypes导入您的文件：import PropTypes from 'prop-types';
3. 使用PropTypes作为独立库 GoogleTagManager.propTypes = { gtmId: PropTypes.string.isRequired, dataLayerName: PropTypes.string, additionalEvents: PropTypes.object, scriptId: PropTypes.string };

或

您只需删除整个proptypes代码块，但我不建议这样做

Answer 2

您所指的使用PropTypes的模块react和PropTypes现在是一个不同的包。这里有更多的信息。

注： 自从ReactiveV15.5之后，React.PropTypes已经进入了另一个包。请改用prop-types库。我们提供了一个自动转换的codemod脚本。