Question

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

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

然后我将其包含在我要跟踪的其中一个页面中：<GoogleTagManager gtmId='GTM-XXXXX' />

然后我只是将标记添加到我的render（）函数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

我错过了什么或者我做错了吗？

由于

附带问题：

onCreateView, mediaPlayer_position = getActivity().getSharedPreferences("PLAY_PAUSE", Activity.MODE_PRIVATE).getInt("CHECK_PLAY_PAUSE", 0);

Answer 1

React.PropTypes - 现在与反应分开，因此还有另一个PropTypes包。

你需要

安装proptypes package
将proptypes导入您的文件： import PropTypes from 'prop-types';
将PropTypes用作独立库

GoogleTagManager.propTypes = { gtmId: PropTypes.string.isRequired, dataLayerName: PropTypes.string, additionalEvents: PropTypes.object, scriptId: PropTypes.string };

或

你可以删除整个proptypes代码块，但我不推荐这个

Answer 2

您所引用的模块使用PropTypes中的react，而PropTypes现在是另一个套餐。 More info here

注意：
     自从React以来，
React.PropTypes已迁移到另一个包中   V15.5。请改用prop-types库。我们提供了一个   codemod script自动转换。

ReactJS与Google跟踪代码管理器

2 个答案: