Ref在模态组件中始终为空

class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.modalRef = null;
  }

  componentDidMount() {
    // 在这里访问 this.modalRef 是安全的
  }

  render() {
    return (
      <div ref={el => this.modalRef = el}>
        {/* 模态内容 */}
      </div>
    );
  }
}

class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.modalRef = React.createRef();
  }

  componentDidMount() {
    // 在这里访问 this.modalRef.current 是安全的
  }

  render() {
    return (
      <div ref={this.modalRef}>
        {/* 模态内容 */}
      </div>
    );
  }
}

import React, { useRef, useEffect } from 'react';

function ModalComponent() {
  const modalRef = useRef(null);

  useEffect(() => {
    // 在这里访问 modalRef.current 是安全的
  }, []);

  return (
    <div ref={modalRef}>
      {/* 模态内容 */}
    </div>
  );
}