ReactJS 与 Google 标签管理器

Question

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

我从网站上拿了这个例子，并创建了一个名为 google-tag-manager.js 的新脚本。

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

然后我简单地将标签添加到我的 render() 函数<GoogleTagManager gtmId='GTM-XXXXX' /> 。

我猜我不完全理解，因为我现在收到以下错误：

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. 安装proptypes 包
2. import PropTypes from 'prop-types';导入您的文件： 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

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

笔记：

自 React v15.5 以来， React.PropTypes已移入不同的包中。 请改用prop-types库。 我们提供了一个codemod 脚本来自动转换。