useImperativeHandle

示例

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 
const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
 
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
 
  return <input ref={inputRef} />;
});
 
const App = () => {
  const fancyInputRef = useRef();
 
  const handleClick = () => {
    fancyInputRef.current.focus();
  };
 
  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};
 
export default App;

注意事项

• useImperativeHandle 应该与 forwardRef 结合使用，以便在父组件中访问子组件实例的方法或属性。
• 使用 useImperativeHandle 可以选择性地暴露子组件的方法或属性，而不会暴露所有内部实现细节。