React中通过Ref从另一组件调用组件方法的问题

嘿，我一眼就瞅出问题所在啦！你没法调用Modal的show方法，核心原因是你错误地直接访问了Ref对象本身，而不是它的.current属性——React用createRef()创建的Ref容器，实际的组件实例是存在于.current字段里的。

问题出在哪？ #

你原来的点击事件写的是onClick={ this.modalRef.show }，但this.modalRef只是React生成的Ref包装对象，它本身并没有show方法，真正的Modal组件实例藏在this.modalRef.current里，直接这么写肯定找不到方法呀。

修正后的完整代码 #

我把关键修改点标出来了，直接用这份代码就能正常调用啦：

import React, { Component, createRef } from 'react';

class Modal extends Component {
  constructor(props) {
    super(props);
    this.show = this.show.bind(this);
  }

  show() {
    console.log('show');
  }

  render() {
    return (
      <div>Modal content here...</div>
    );
  }
}

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

  render() {
    return (
      <div>
        <Modal ref={this.modalRef}/>
        {/* 关键修改：通过current访问组件实例，用箭头函数包裹事件逻辑 */}
        <button id="myBtn" onClick={() => this.modalRef.current.show()}>
          Call show modal method
        </button>
      </div>
    );
  }
}

export default App;

额外小提示 #

如果你的Modal是动态渲染的（比如可能在某些条件下被卸载），最好加个空值判断避免报错：

onClick={() => {
  if (this.modalRef.current) {
    this.modalRef.current.show();
  }
}}

这样能防止组件未挂载时调用方法导致的控制台错误。

内容的提问来源于stack exchange，提问作者Franofcholet