TypeError： 无法读取 undefined 的属性'refs' - Next.js App & React

Question

My/pages/index.js

import { showFlyout, Flyout } from '../components/flyout'
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
showFo() {
// Unhandled Runtime Error
// TypeError: Cannot read property 'refs' of undefined
// Source
showFlyout(<Flyout title="My Flyout"><p>My <strong>FLYOUT</strong>!!!</p></Flyout>, this.refs.root)
//                                                                                      ^
console.log(this) // undefined
}
render() {
return (
<div ref="root">
...
<button onClick={this.showFo}>Click me!</button>
</div>
)
}
}

我的/components/flyout.js

import styles from './flyout.module.css' // No errors here
import ReactDOM from 'react-dom'
class Flyout extends React.Component {
constructor(props) {
super(props);
this.state = {
flyoutEleClassName: styles.flyout,
};
}
...
render() {
return (
<div className={this.state.flyoutEleClassName} ref={(ref) => { this.flyoutEle = ref }}>
...
</div>
);
}
}
function showFlyout(flyout, target) {
ReactDOM.render(flyout, target) // This is the function I used in `/pages/index.js`
}
export { showFlyout, Flyout }

这是错误：

未处理的运行时错误 类型错误：无法读取未定义的属性"refs">

源

showFlyout(<Flyout title="My Flyout"><p>My <strong>FLYOUT</strong>!!!</p></Flyout>, this.refs.root)
                  ^

Answer 1

这里指的是this.flyoutEle：

constructor(props) {
super(props);
this.flyoutEle = React.createRef();
}
<div className={this.state.flyoutEleClassName} ref={(ref) => { this.flyoutEle = ref }}>
...
</div>

然后，您应该尝试使用this.flyoutEle.current而不是this.refs.root

让我知道这是否适合您！！