React
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 React.forwardRef 一起使用：
import React, { useRef, useImperativeHandle, useState } from 'react'
function FancyInput(props, ref) {
const inputRef = useRef();
// 自定义暴露给父组件的 ref 实例值
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" {...props} />;
}
// 通过 forwardRef 向父组件传递暴露的 ref
const ForwardFancyInput = React.forwardRef(FancyInput);
export default function Counter() {
const [text, setText] = useState('');
const inputRef = useRef();
const onInputFocus = () => {
inputRef.current.focus();
};
return (
<>
<ForwardFancyInput ref={inputRef} value={text} onChange={e => setText(e.target.value)} />
<button onClick={onInputFocus}>Input focus</button>
</>
);
}