如何在React组件中暴露方法？附相关代码示例

你的代码里核心问题是把JSX虚拟DOM元素当成了组件实例，<CView />只是React用来描述UI的虚拟对象，并不是CView类的真实实例，所以直接调用this.cv.someFunc()肯定会报错。要获取组件实例并调用它的方法，我们可以用React的ref特性，下面是两种可行的方案：

方案一：使用createRef（React 16.3+推荐） #

修改App组件，通过createRef创建一个引用，绑定到CView组件上，这样就能拿到真实的组件实例：

import React, { Component, createRef } from "react";
import { render } from "react-dom";

class CView extends Component {
  someFunc() {
    alert(1);
  }
  render() {
    return <div>Hello, there</div>;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    // 创建ref对象
    this.cvRef = createRef();
  }

  handleClick = () => {
    // 通过current属性获取组件实例，调用方法
    this.cvRef.current.someFunc();
  };

  render() {
    return (
      <div>
        <h2 onClick={this.handleClick}>Click Me</h2>
        {/* 将ref绑定到CView组件 */}
        <CView ref={this.cvRef} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

方案二：使用回调ref（兼容旧版本React） #

如果你的React版本低于16.3，可以用回调ref的方式获取实例：

import React, { Component } from "react";
import { render } from "react-dom";

class CView extends Component {
  someFunc() {
    alert(1);
  }
  render() {
    return <div>Hello, there</div>;
  }
}

class App extends Component {
  handleClick = () => {
    this.cvInstance.someFunc();
  };

  render() {
    return (
      <div>
        <h2 onClick={this.handleClick}>Click Me</h2>
        {/* 回调ref：组件挂载时会把实例传入这个函数 */}
        <CView ref={(instance) => (this.cvInstance = instance)} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

注意事项 #

• 不要过度依赖ref调用子组件方法，React更推荐通过状态提升或者**上下文（Context）**来实现组件间通信，ref应该作为最后的兜底方案。
• 确保在调用方法前，组件已经挂载完成（比如不要在constructor里调用，要在组件挂载后的生命周期或事件回调里调用）。

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