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)

相关推荐
jessezappy17 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林84344 分钟前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript