【发布时间】：2020-09-09 10:53:24
【问题描述】：
我在呈现页面时遇到这些错误。 我的项目基于 NodeJs + React。
我正在使用这些版本。 反应版本：^16.5 反应穹顶：^16.5 @material-ui/核心：^4.9.1 @material-ui/icons : ^4.9.1"
第一个错误：
Tooltip.js:479 Uncaught TypeError: Cannot read property 'className' of undefined
at Tooltip (Tooltip.js:479)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22157)
at workLoopSync (react-dom.development.js:22130)
第二个错误：
The above error occurred in the <ForwardRef(Tooltip)> component:
in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
in WithStyles(ForwardRef(Tooltip)) (created by Block)
in div (created by Block)
in Block (created by BlockAnimation)
in div (created by PoseElement)
in PoseElement (created by Context.Consumer)
in Unknown (created by BlockAnimation)
in Transition (created by PoseGroup)
in PoseGroup (created by BlockAnimation)
in div (created by BlockAnimation)
in BlockAnimation (created by Route)
in Route (created by withRouter(BlockAnimation))
in withRouter(BlockAnimation) (created by Navigation)
in div (created by Navigation)
in div (created by Navigation)
in div (created by ForwardRef(Toolbar))
in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
in WithStyles(ForwardRef(Toolbar)) (created by Navigation)
in header (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
in WithStyles(ForwardRef(AppBar)) (created by Navigation)
in div (created by Navigation)
in Navigation (created by Connect(Navigation))
in Connect(Navigation) (created by Route)
in Route (created by withRouter(Connect(Navigation)))
in withRouter(Connect(Navigation)) (created by ReduxWrapper)
in div (created by ReduxWrapper)
in ReduxWrapper (created by Connect(ReduxWrapper))
in Connect(ReduxWrapper) (created by Root)
in div (created by Root)
in Root (created by Route)
in Route
in div
in Router (created by ConnectedRouter)
in ConnectedRouter
in Provider
in AppContainer
我不明白这是什么意思。
Errors are thrown into this page.
像这样使用工具提示：
import React, { Component } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import styles from './styles.css';
class Block extends Component
{
state = {tooltipOpen:false};
open = () => {
this.setState({
tooltipOpen: true
});
}
close = () => {
this.setState({
tooltipOpen: false
});
}
render ()
{
const {
state: { tooltipOpen },
props:{num}
} = this;
return (
<div>
<div id={`block${num}`} className={`${styles['bar']} d-inline-flex`} onClick={(i)=>this.props.onClick({num})}></div>
<Tooltip title={`block${num}`} placement="bottom" open={tooltipOpen} onOpen={this.open}
onClose={this.close}
enterDelay={250}>
{`Block: ${num}`}
</Tooltip>
</div>
);
}
}
export default Block;
【问题讨论】：
-
请分享您的代码中与抛出的错误相关的部分。
-
我在上面附上了代码快照。请检查。
标签： javascript node.js reactjs react-dom react-tooltip