无法从父组件调用子组件的功能。错误：“ ...不是函数”

Question

对于我的网站，我想包含一项功能，可帮助用户以编程方式随机单击链接。该事件发生在名为StreamingPlaza的父组件中，并且有一个称为StreamingCard的子组件列表，每个子组件都包含一个流链接。下面是我的代码：

流媒体广场

class StreamingPlaza extends Component {

  state = {
    ......
    }

    roomclicks = React.createRef([]);

    componentDidMount() {
      this.roomclicks.current[0].handleClick();
   }

     renderRoom = (room) => {
        return <StreamingCard info={room} ref={(ref) => {this.roomclicks.current[0] = ref}}></StreamingCard>;

     render() {

       const rooms = this.props.rooms;

       return (
        { rooms && rooms.map (room => {
          return this.renderRoom(room);  
        })
      }
    );
}
}

流卡

class StreamingCard extends Component {

  constructor(props){
    super(props);
    this.state = {
     ......
    }

  handleClick = () => {
    console.log("called");
    document.getElementById("link").click();
  }

  render() {
    return (
       ✔️ Streaming Link: <a id="link" href=......></a>
    );
  }
 }

我收到错误消息“ this.roomclicks.current [0] .handleClick不是函数”。我浏览了许多相关的stackoverflow帖子，答案表明该代码应该可以正常工作。如果有人可以告诉我我做错了什么，我将不胜感激。谢谢！