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

一、研究背景

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

二、实践过程

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

ref

props

静态属性方法

React.forwardRef

useImperativeHandle

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

javascript 复制代码
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)

相关推荐
mosen8687 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js