react如何对外提供方法
在 React 中对外提供方法
React 组件可以通过多种方式对外提供方法，以下是常见的几种实现方式：
使用 ref 暴露方法
通过 useImperativeHandle 钩子结合 forwardRef，可以将组件内部方法暴露给父组件：
import React, { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const internalMethod = () => {
console.log('Method called from parent');
};
useImperativeHandle(ref, () => ({
exposedMethod: internalMethod
}));
return <div>Child Component</div>;
});
// 父组件调用
function ParentComponent() {
const childRef = React.useRef();
const handleClick = () => {
childRef.current.exposedMethod();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</>
);
}通过 props 传递回调函数
父组件可以通过 props 传递回调函数，子组件在适当时机调用：
function ChildComponent({ onAction }) {
const handleClick = () => {
onAction('Data from child');
};
return <button onClick={handleClick}>Trigger Parent</button>;
}
function ParentComponent() {
const handleChildAction = (data) => {
console.log('Received:', data);
};
return <ChildComponent onAction={handleChildAction} />;
}使用自定义 Hook
创建自定义 Hook 封装可复用的逻辑和方法：
function useCounter() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
return { count, increment, decrement };
}
function Component() {
const counter = useCounter();
return (
<div>
<span>{counter.count}</span>
<button onClick={counter.increment}>+</button>
<button onClick={counter.decrement}>-</button>
</div>
);
}通过 Context 提供方法
使用 Context API 跨组件树共享方法：
const MethodContext = React.createContext();
function ParentComponent() {
const sharedMethod = () => {
console.log('Method available to all children');
};
return (
<MethodContext.Provider value={{ sharedMethod }}>
<ChildComponent />
</MethodContext.Provider>
);
}
function ChildComponent() {
const { sharedMethod } = React.useContext(MethodContext);
return <button onClick={sharedMethod}>Call Shared Method</button>;
}类组件方法暴露
对于类组件，可以直接通过 ref 访问实例方法：
class ChildComponent extends React.Component {
exposedMethod() {
console.log('Class method called');
}
render() {
return <div>Class Component</div>;
}
}
function ParentComponent() {
const childRef = React.createRef();
const handleClick = () => {
childRef.current.exposedMethod();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Class Method</button>
</>
);
}选择哪种方式取决于具体场景：
- 父子组件通信优先考虑 props 回调
- 复杂组件树考虑 Context
- 需要精细控制方法暴露时使用 useImperativeHandle
- 逻辑复用优先考虑自定义 Hook
