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

Question

我的/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 }

这是错误：

未处理的运行时错误 TypeError：无法读取未定义的属性'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

让我知道这是否适合你！