Tooltip页面白板问题

render: (text,record)=>{
    return  <Tooltip title={text} placement="bottom"><div>{text.createDate}</div></Tooltip>
}

大家能看出上面这段代码有什么问题么？
我当时没有看出来，主要是因为粗心。
上面这段代码在项目中运行之后，页面总是白板并且报以下错误。
错误摘要，真正的错误在后面，很长，很长。

index.js:2178 Warning: Failed prop type: Invalid prop `overlay` supplied to `Tooltip`.

index.js:2178 Warning: Failed prop type: Invalid prop `overlay` supplied to `Content`.

遇见下面这种问题，先不要看代码，看错误是什么，尽可能的去百度搜索。其实我觉得主要是看关键词。就像下面这个一看就与内容有关。因此立马就可以想到是我的title写错了。
正确的代码如下：

render: (text,record)=>{
        return  <Tooltip title={text.createDate} placement="bottom"><div>{text.createDate}</div></Tooltip>
}

两个差别就在title这里。这样细小的问题致命啊。所以做事需要细心。

完整错误的代码如下，仅供参考。

index.js:2178 Warning: Failed prop type: Invalid prop `overlay` supplied to `Tooltip`.in Tooltip (created by Tooltip)in Tooltip (at Bus.js:577)in td (created by TableCell)in TableCell (created by TableRow)in tr (created by BodyRow)in BodyRow (created by TableRow)in TableRow (created by Connect(TableRow))in Connect(TableRow) (created by ExpandableRow)in ExpandableRow (created by Connect(ExpandableRow))in Connect(ExpandableRow) (created by BaseTable)in tbody (created by BaseTable)in table (created by BaseTable)in BaseTable (created by Connect(BaseTable))in Connect(BaseTable) (created by BodyTable)in div (created by BodyTable)in BodyTable (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in ExpandableTable (created by Connect(ExpandableTable))in Connect(ExpandableTable) (created by Table)in Provider (created by Table)in Table (created by LocaleReceiver)in LocaleReceiver (created by Table)in div (created by Spin)in AnimateChild (created by Animate)in div (created by Animate)in Animate (created by Spin)in Spin (created by Table)in div (created by Table)in Table (at Bus.js:937)in div (at Bus.js:935)in div (at Bus.js:891)in Bus (created by inject-Bus-with-StoreBus)in inject-Bus-with-StoreBus (created by Route)in Route (at index.js:67)in Switch (at index.js:66)in div (at index.js:65)in div (at index.js:59)in div (at index.js:57)in div (at index.js:55)in CustomerCenter (created by inject-CustomerCenter-with-StoreBus)in inject-CustomerCenter-with-StoreBus (created by Route)in Route (at routerMain.js:74)in Switch (at routerMain.js:72)in Router (created by BrowserRouter)in BrowserRouter (at routerMain.js:71)in div (at routerMain.js:69)in RouterMain (created by inject-RouterMain-with-StoreBus)in inject-RouterMain-with-StoreBus (at App.js:16)in div (at App.js:15)in App (at index.js:16)in Provider (at index.js:15)

index.js:2178 Warning: Failed prop type: Invalid prop `overlay` supplied to `Content`.in Content (created by Trigger)in Trigger (created by Tooltip)in Tooltip (created by Tooltip)in Tooltip (at Bus.js:577)in td (created by TableCell)in TableCell (created by TableRow)in tr (created by BodyRow)in BodyRow (created by TableRow)in TableRow (created by Connect(TableRow))in Connect(TableRow) (created by ExpandableRow)in ExpandableRow (created by Connect(ExpandableRow))in Connect(ExpandableRow) (created by BaseTable)in tbody (created by BaseTable)in table (created by BaseTable)in BaseTable (created by Connect(BaseTable))in Connect(BaseTable) (created by BodyTable)in div (created by BodyTable)in BodyTable (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in ExpandableTable (created by Connect(ExpandableTable))in Connect(ExpandableTable) (created by Table)in Provider (created by Table)in Table (created by LocaleReceiver)in LocaleReceiver (created by Table)in div (created by Spin)in AnimateChild (created by Animate)in div (created by Animate)in Animate (created by Spin)in Spin (created by Table)in div (created by Table)in Table (at Bus.js:937)in div (at Bus.js:935)in div (at Bus.js:891)in Bus (created by inject-Bus-with-StoreBus)in inject-Bus-with-StoreBus (created by Route)in Route (at index.js:67)in Switch (at index.js:66)in div (at index.js:65)in div (at index.js:59)in div (at index.js:57)in div (at index.js:55)in CustomerCenter (created by inject-CustomerCenter-with-StoreBus)in inject-CustomerCenter-with-StoreBus (created by Route)in Route (at routerMain.js:74)in Switch (at routerMain.js:72)in Router (created by BrowserRouter)in BrowserRouter (at routerMain.js:71)in div (at routerMain.js:69)in RouterMain (created by inject-RouterMain-with-StoreBus)in inject-RouterMain-with-StoreBus (at App.js:16)in div (at App.js:15)in App (at index.js:16)in Provider (at index.js:15)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
validatePropTypes @ react.development.js:1233
createElementWithValidation @ react.development.js:1321
Tooltip._this.getPopupElement @ Tooltip.js:35
getComponent @ index.js:610
render @ index.js:366
finishClassComponent @ react-dom.development.js:8389
updateClassComponent @ react-dom.development.js:8357
beginWork @ react-dom.development.js:8982
performUnitOfWork @ react-dom.development.js:11814
workLoop @ react-dom.development.js:11843
renderRoot @ react-dom.development.js:11874
performWorkOnRoot @ react-dom.development.js:12449
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
requestWork @ react-dom.development.js:12247
scheduleWorkImpl @ react-dom.development.js:12122
scheduleWork @ react-dom.development.js:12082
enqueueSetState @ react-dom.development.js:6644
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:238
Tooltip._this.onVisibleChange @ index.js:36
setPopupVisible @ index.js:157
(anonymous) @ index.js:168
setTimeout (async)
delaySetPopupVisible @ index.js:167
onMouseEnter @ index.js:439
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:466
executeDispatchesInOrder @ react-dom.development.js:488
executeDispatchesAndRelease @ react-dom.development.js:586
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:597
forEachAccumulated @ react-dom.development.js:565
runEventsInBatch @ react-dom.development.js:728
runExtractedEventsInBatch @ react-dom.development.js:737
handleTopLevel @ react-dom.development.js:4201
batchedUpdates @ react-dom.development.js:12537
batchedUpdates @ react-dom.development.js:1939
dispatchEvent @ react-dom.development.js:4282
invariant.js:42 Uncaught Error: Objects are not valid as a React child (found: object with keys {397, 399, 505, 527, creatorName, key, tagName, customerId, siteId, userId, tag, visibleRange, permissionId, isUse, modifyUserid, modifyDate, createUserid, createDate}). If you meant to render a collection of children, use an array instead.in div (created by Content)in Content (created by Trigger)in div (created by LazyRenderBox)in LazyRenderBox (created by PopupInner)in div (created by PopupInner)in PopupInner (created by Popup)in Align (created by Popup)in AnimateChild (created by Animate)in Animate (created by Popup)in div (created by Popup)in Popup (created by Trigger)in Portal (created by Trigger)in Trigger (created by Tooltip)in Tooltip (created by Tooltip)in Tooltip (at Bus.js:577)in td (created by TableCell)in TableCell (created by TableRow)in tr (created by BodyRow)in BodyRow (created by TableRow)in TableRow (created by Connect(TableRow))in Connect(TableRow) (created by ExpandableRow)in ExpandableRow (created by Connect(ExpandableRow))in Connect(ExpandableRow) (created by BaseTable)in tbody (created by BaseTable)in table (created by BaseTable)in BaseTable (created by Connect(BaseTable))in Connect(BaseTable) (created by BodyTable)in div (created by BodyTable)in BodyTable (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in ExpandableTable (created by Connect(ExpandableTable))in Connect(ExpandableTable) (created by Table)in Provider (created by Table)in Table (created by LocaleReceiver)in LocaleReceiver (created by Table)in div (created by Spin)in AnimateChild (created by Animate)in div (created by Animate)in Animate (created by Spin)in Spin (created by Table)in div (created by Table)in Table (at Bus.js:937)in div (at Bus.js:935)in div (at Bus.js:891)in Bus (created by inject-Bus-with-StoreBus)in inject-Bus-with-StoreBus (created by Route)in Route (at index.js:67)in Switch (at index.js:66)in div (at index.js:65)in div (at index.js:59)in div (at index.js:57)in div (at index.js:55)in CustomerCenter (created by inject-CustomerCenter-with-StoreBus)in inject-CustomerCenter-with-StoreBus (created by Route)in Route (at routerMain.js:74)in Switch (at routerMain.js:72)in Router (created by BrowserRouter)in BrowserRouter (at routerMain.js:71)in div (at routerMain.js:69)in RouterMain (created by inject-RouterMain-with-StoreBus)in inject-RouterMain-with-StoreBus (at App.js:16)in div (at App.js:15)in App (at index.js:16)in Provider (at index.js:15)at invariant (invariant.js:42)at throwOnInvalidObjectType (react-dom.development.js:7362)at reconcileChildFibers (react-dom.development.js:8129)at reconcileChildrenAtExpirationTime (react-dom.development.js:8240)at reconcileChildren (react-dom.development.js:8231)at updateHostComponent (react-dom.development.js:8539)at beginWork (react-dom.development.js:8986)at performUnitOfWork (react-dom.development.js:11814)at workLoop (react-dom.development.js:11843)at HTMLUnknownElement.callCallback (react-dom.development.js:100)at Object.invokeGuardedCallbackDev (react-dom.development.js:138)at invokeGuardedCallback (react-dom.development.js:187)at replayUnitOfWork (react-dom.development.js:11318)at renderRoot (react-dom.development.js:11885)at performWorkOnRoot (react-dom.development.js:12449)at performWork (react-dom.development.js:12370)at performSyncWork (react-dom.development.js:12347)at requestWork (react-dom.development.js:12247)at scheduleWorkImpl (react-dom.development.js:12122)at scheduleWork (react-dom.development.js:12082)at Object.enqueueSetState (react-dom.development.js:6644)at Tooltip../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:238)at Object.Tooltip._this.onVisibleChange [as onPopupVisibleChange] (index.js:36)at Trigger.setPopupVisible (index.js:157)at index.js:168
invariant @ invariant.js:42
throwOnInvalidObjectType @ react-dom.development.js:7362
reconcileChildFibers @ react-dom.development.js:8129
reconcileChildrenAtExpirationTime @ react-dom.development.js:8240
reconcileChildren @ react-dom.development.js:8231
updateHostComponent @ react-dom.development.js:8539
beginWork @ react-dom.development.js:8986
performUnitOfWork @ react-dom.development.js:11814
workLoop @ react-dom.development.js:11843
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
replayUnitOfWork @ react-dom.development.js:11318
renderRoot @ react-dom.development.js:11885
performWorkOnRoot @ react-dom.development.js:12449
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
requestWork @ react-dom.development.js:12247
scheduleWorkImpl @ react-dom.development.js:12122
scheduleWork @ react-dom.development.js:12082
enqueueSetState @ react-dom.development.js:6644
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:238
Tooltip._this.onVisibleChange @ index.js:36
setPopupVisible @ index.js:157
(anonymous) @ index.js:168
setTimeout (async)
delaySetPopupVisible @ index.js:167
onMouseEnter @ index.js:439
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:466
executeDispatchesInOrder @ react-dom.development.js:488
executeDispatchesAndRelease @ react-dom.development.js:586
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:597
forEachAccumulated @ react-dom.development.js:565
runEventsInBatch @ react-dom.development.js:728
runExtractedEventsInBatch @ react-dom.development.js:737
handleTopLevel @ react-dom.development.js:4201
batchedUpdates @ react-dom.development.js:12537
batchedUpdates @ react-dom.development.js:1939
dispatchEvent @ react-dom.development.js:4282
index.js:2178 The above error occurred in the <div> component:in div (created by Content)in Content (created by Trigger)in div (created by LazyRenderBox)in LazyRenderBox (created by PopupInner)in div (created by PopupInner)in PopupInner (created by Popup)in Align (created by Popup)in AnimateChild (created by Animate)in Animate (created by Popup)in div (created by Popup)in Popup (created by Trigger)in Portal (created by Trigger)in Trigger (created by Tooltip)in Tooltip (created by Tooltip)in Tooltip (at Bus.js:577)in td (created by TableCell)in TableCell (created by TableRow)in tr (created by BodyRow)in BodyRow (created by TableRow)in TableRow (created by Connect(TableRow))in Connect(TableRow) (created by ExpandableRow)in ExpandableRow (created by Connect(ExpandableRow))in Connect(ExpandableRow) (created by BaseTable)in tbody (created by BaseTable)in table (created by BaseTable)in BaseTable (created by Connect(BaseTable))in Connect(BaseTable) (created by BodyTable)in div (created by BodyTable)in BodyTable (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in ExpandableTable (created by Connect(ExpandableTable))in Connect(ExpandableTable) (created by Table)in Provider (created by Table)in Table (created by LocaleReceiver)in LocaleReceiver (created by Table)in div (created by Spin)in AnimateChild (created by Animate)in div (created by Animate)in Animate (created by Spin)in Spin (created by Table)in div (created by Table)in Table (at Bus.js:937)in div (at Bus.js:935)in div (at Bus.js:891)in Bus (created by inject-Bus-with-StoreBus)in inject-Bus-with-StoreBus (created by Route)in Route (at index.js:67)in Switch (at index.js:66)in div (at index.js:65)in div (at index.js:59)in div (at index.js:57)in div (at index.js:55)in CustomerCenter (created by inject-CustomerCenter-with-StoreBus)in inject-CustomerCenter-with-StoreBus (created by Route)in Route (at routerMain.js:74)in Switch (at routerMain.js:72)in Router (created by BrowserRouter)in BrowserRouter (at routerMain.js:71)in div (at routerMain.js:69)in RouterMain (created by inject-RouterMain-with-StoreBus)in inject-RouterMain-with-StoreBus (at App.js:16)in div (at App.js:15)in App (at index.js:16)in Provider (at index.js:15)Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9643
logError @ react-dom.development.js:9682
commitErrorLogging @ react-dom.development.js:9895
commitAllLifeCycles @ react-dom.development.js:11459
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:11594
completeRoot @ react-dom.development.js:12502
performWorkOnRoot @ react-dom.development.js:12452
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
requestWork @ react-dom.development.js:12247
scheduleWorkImpl @ react-dom.development.js:12122
scheduleWork @ react-dom.development.js:12082
enqueueSetState @ react-dom.development.js:6644
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:238
Tooltip._this.onVisibleChange @ index.js:36
setPopupVisible @ index.js:157
(anonymous) @ index.js:168
setTimeout (async)
delaySetPopupVisible @ index.js:167
onMouseEnter @ index.js:439
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:466
executeDispatchesInOrder @ react-dom.development.js:488
executeDispatchesAndRelease @ react-dom.development.js:586
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:597
forEachAccumulated @ react-dom.development.js:565
runEventsInBatch @ react-dom.development.js:728
runExtractedEventsInBatch @ react-dom.development.js:737
handleTopLevel @ react-dom.development.js:4201
batchedUpdates @ react-dom.development.js:12537
batchedUpdates @ react-dom.development.js:1939
dispatchEvent @ react-dom.development.js:4282
invariant.js:42 Uncaught Error: Objects are not valid as a React child (found: object with keys {397, 399, 505, 527, creatorName, key, tagName, customerId, siteId, userId, tag, visibleRange, permissionId, isUse, modifyUserid, modifyDate, createUserid, createDate}). If you meant to render a collection of children, use an array instead.in div (created by Content)in Content (created by Trigger)in div (created by LazyRenderBox)in LazyRenderBox (created by PopupInner)in div (created by PopupInner)in PopupInner (created by Popup)in Align (created by Popup)in AnimateChild (created by Animate)in Animate (created by Popup)in div (created by Popup)in Popup (created by Trigger)in Portal (created by Trigger)in Trigger (created by Tooltip)in Tooltip (created by Tooltip)in Tooltip (at Bus.js:577)in td (created by TableCell)in TableCell (created by TableRow)in tr (created by BodyRow)in BodyRow (created by TableRow)in TableRow (created by Connect(TableRow))in Connect(TableRow) (created by ExpandableRow)in ExpandableRow (created by Connect(ExpandableRow))in Connect(ExpandableRow) (created by BaseTable)in tbody (created by BaseTable)in table (created by BaseTable)in BaseTable (created by Connect(BaseTable))in Connect(BaseTable) (created by BodyTable)in div (created by BodyTable)in BodyTable (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in div (created by ExpandableTable)in ExpandableTable (created by Connect(ExpandableTable))in Connect(ExpandableTable) (created by Table)in Provider (created by Table)in Table (created by LocaleReceiver)in LocaleReceiver (created by Table)in div (created by Spin)in AnimateChild (created by Animate)in div (created by Animate)in Animate (created by Spin)in Spin (created by Table)in div (created by Table)in Table (at Bus.js:937)in div (at Bus.js:935)in div (at Bus.js:891)in Bus (created by inject-Bus-with-StoreBus)in inject-Bus-with-StoreBus (created by Route)in Route (at index.js:67)in Switch (at index.js:66)in div (at index.js:65)in div (at index.js:59)in div (at index.js:57)in div (at index.js:55)in CustomerCenter (created by inject-CustomerCenter-with-StoreBus)in inject-CustomerCenter-with-StoreBus (created by Route)in Route (at routerMain.js:74)in Switch (at routerMain.js:72)in Router (created by BrowserRouter)in BrowserRouter (at routerMain.js:71)in div (at routerMain.js:69)in RouterMain (created by inject-RouterMain-with-StoreBus)in inject-RouterMain-with-StoreBus (at App.js:16)in div (at App.js:15)in App (at index.js:16)in Provider (at index.js:15)at invariant (invariant.js:42)at throwOnInvalidObjectType (react-dom.development.js:7362)at reconcileChildFibers (react-dom.development.js:8129)at reconcileChildrenAtExpirationTime (react-dom.development.js:8240)at reconcileChildren (react-dom.development.js:8231)at updateHostComponent (react-dom.development.js:8539)at beginWork (react-dom.development.js:8986)at performUnitOfWork (react-dom.development.js:11814)at workLoop (react-dom.development.js:11843)at renderRoot (react-dom.development.js:11874)at performWorkOnRoot (react-dom.development.js:12449)at performWork (react-dom.development.js:12370)at performSyncWork (react-dom.development.js:12347)at requestWork (react-dom.development.js:12247)at scheduleWorkImpl (react-dom.development.js:12122)at scheduleWork (react-dom.development.js:12082)at Object.enqueueSetState (react-dom.development.js:6644)at Tooltip../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:238)at Object.Tooltip._this.onVisibleChange [as onPopupVisibleChange] (index.js:36)at Trigger.setPopupVisible (index.js:157)at index.js:168

Tooltip页面白板问题相关推荐

解决vue打包之后页面白板跨域等问题
vue.gonfig.js做配置 const path = require("path"); const resolve = function(dir) {return path. ...
有关协同开发实际工作的问题
项目大了,出现的沟通中的无限效率底下.前一段在开发了个群组的后台管理系统,就是管理群组,管理里面发布的内容.但是任务分工的时候是按层划分的,之前没有这样开发过,笔者自己做的,就是像对方去描述我需要的接 ...
matlab mafdr,matlab FDR校正
http://home.52brain.com/forum.php?mod=viewthread&tid=27066&page=1#pid170857 http://www.mathw ...
移动端Web开发调试之Weinre调试教程
Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程We ...
WebServer【笔记2】
完成404的响应上一个版本中我们已经实现了根据浏览器中用户在地址栏上输入的URL中的抽象路径去static目录下寻找对应资源进行响应的工作. 但是会存在路径输入有误,导致定位不对(要么定位的是一个目 ...
交互式无纸化会议系统功能解析
1.多平台兼容系统核心软件平台基于Java开发,采用B/S架构,全面支持Windows.Linux等系统跨平台移植和部署,终端支持Windows.安卓系统. 2.智能进程管理系统具有特有的会议 ...
从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
不得不爱开源 Wijmo jQuery 插件集（13）-【Tooltip】(附页面展示和源码)
Wijmo Tooltip 可以给你的网站添加动感十足的提示信息,给您的最终用户完美的工具提示!在上一篇文章中我们,给大家介绍了 Wijmo -列表插件的特性及使用方法.感谢园子中朋友的支持,朋友们的 ...
中国地图tooltip轮播以及点击tooltip进行页面跳转
中国地图tooltip轮播以及点击tooltip进行页面跳转 tooltip轮播点击进行页面跳转废话不说,直接上代码 <div id="ChartsChina" ref=& ...

Tooltip页面白板问题

Tooltip页面白板问题相关推荐

最新文章

热门文章