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

devtools/2024/9/25 9:18:07/

一、研究背景

最近遇到一个如何暴露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所示。