React组件如何暴露自身的方法

一、研究背景

最近遇到一个如何暴露React组件自身方法的问题。在某些时候，我们需要调用某个组件内部的方法以实现某个功能，因此我们需要了解如何暴露组件内部API的方法。

二、实践过程

本文主要介绍React组件暴露子组件API的方法，以下是实践过程：

ref

props

静态属性方法

React.forwardRef

useImperativeHandle 

等可以实现组件暴露自身API，部分API示例代码如下：

import React, {useImperativeHandle} from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
    constructor(props) {
        super(props);
        // 创建一个ref存储textInput的DOM元素
        this.forwardButtonRef = React.createRef();
        this.homeRef = React.createRef();
        // 控制台输出：{ current: null }，展开：current: <div>....，因为引用值被后续的ref值覆盖而改变
        console.log("forwardButtonRef-", this.forwardButtonRef);
    }

    // ref回調函數
    childRefCallback = (el) => {
        console.log("App的childRefCallback-", el);
        this.childInputRef = el;
    };

    componentDidMount() {
        // 在此或者更晚的方法获取ref（组件挂载后）
        console.log(
            "Child-",
            this.childInputRef,
            "forwardRef-button-",
            this.forwardButtonRef,
            "homeRef-",
            this.homeRef
        );
        // 调用子组件向外暴露的方法
        this.childInputRef.handleChildClick()
        this.forwardButtonRef.current.handleForwardRefClick()
        this.homeRef.current.handleHomeClick()
    }

    render() {
        return (
            <div>
                <h1>组件暴露自身API的方法</h1>
                {/* ref回调函数 */}
                <Child inputRef={this.childRefCallback}/>
                {/* 转发ref，在父组件获取子组件的ref */}
                <ForwardRefButton ref={this.forwardButtonRef}>
                    <span>ForwardRef</span>
                </ForwardRefButton>
                <Home ref={this.homeRef}/>
            </div>
        );
    }
}


// 使用forwardRef轉發ref
const ForwardRefButton = React.forwardRef((props, fdRef) => {

    const handleForwardRefClick = () => {
        console.log("ForwardRefButton的handleForwardRefClick方法");
    };

    // 向外暴露方法，讓父組件訪問子組件中的方法
    useImperativeHandle(fdRef, () => ({
      handleForwardRefClick,
    }));

    return (
        <button ref={fdRef} className="frButton">
            {props.children}
        </button>
    );
});

function Child(props) {
    function handleChildClick() {
        console.log("Child的handleChildClick方法");
    }

    // 函数式组件向外暴露自身方法
    useImperativeHandle(props.inputRef, () => ({
        handleChildClick,
    }));

    return <input ref={props.inputRef}/>;
}

class Home extends React.Component {
    // 类組件會自動向外暴露該組件的配置信息
    handleHomeClick = () => {
        console.log("Home的handleHomeClick方法");
    };

    render() {
        return <div onClick={this.handleHomeClick}>Home</div>;
    }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);

下面是实践的效果，明显发现已经获取到组件内部的方法，如下图2-1所示。

图 2-1

三、参考文献

javascript - React 组件暴露自身 API 的方法 - 个人文章 - SegmentFault 思否

react+typescript 父组件主动获取子组件内暴露的方法或属性 - 天高任鸟飞吧 - 博客园 (cnblogs.com)