react如何对外提供方法
在 React 中对外提供方法
React 组件可以通过 ref 或自定义 Hook 的方式对外暴露方法。以下是常见的实现方式：
使用 forwardRef 和 useImperativeHandle
通过 forwardRef 和 useImperativeHandle 可以显式地对外暴露组件内部方法。
import React, { forwardRef, useImperativeHandle } from 'react';
const MyComponent = forwardRef((props, ref) => {
const internalMethod = () => {
console.log('Method called');
};
useImperativeHandle(ref, () => ({
externalMethod: internalMethod
}));
return <div>My Component</div>;
});
// 使用
function App() {
const myComponentRef = React.useRef();
const handleClick = () => {
myComponentRef.current.externalMethod();
};
return (
<div>
<MyComponent ref={myComponentRef} />
<button onClick={handleClick}>Call Method</button>
</div>
);
}通过 Props 传递回调函数
父组件可以通过 props 传递回调函数，子组件在适当时机调用。
const ChildComponent = ({ onAction }) => {
const handleClick = () => {
onAction('Data from child');
};
return <button onClick={handleClick}>Trigger Action</button>;
};
function ParentComponent() {
const handleChildAction = (data) => {
console.log(data);
};
return <ChildComponent onAction={handleChildAction} />;
}使用自定义 Hook
将逻辑封装为 Hook，其他组件可以直接调用 Hook 返回的方法。
const useCounter = () => {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
return { count, increment, decrement };
};
function CounterDisplay() {
const { count, increment, decrement } = useCounter();
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
);
}类组件中的方法暴露
类组件可以通过 ref 直接访问实例方法。
class MyClassComponent extends React.Component {
publicMethod() {
console.log('Public method called');
}
render() {
return <div>Class Component</div>;
}
}
function App() {
const componentRef = React.createRef();
const handleClick = () => {
componentRef.current.publicMethod();
};
return (
<div>
<MyClassComponent ref={componentRef} />
<button onClick={handleClick}>Call Method</button>
</div>
);
}注意事项
- 优先考虑通过 props 传递回调函数的方式，避免过度使用
ref。 - 函数组件默认不会暴露实例方法，需结合
forwardRef和useImperativeHandle。 - 类组件的
ref会直接指向组件实例，但函数组件需要通过useImperativeHandle选择性暴露方法。
