react hook: useimperativeHandle

通过 useImperativeHandle,子组件可以选择性地暴露给父组件某些属性或方法,而不是将所有属性和方法暴露出去。

父组件 获得自组件的 ref,就能通过该 ref 来调用 focus来聚焦等功能

在 forwardRef 包装的组件中,ref 固定地是第二个参数,而第一个参数是这个组件接受的 props。这是 React 为了确保 forwardRef 正确工作而规定的。所以在这种情况下,ref 必须放在第二个参数的位置。

javascript 复制代码
app.js

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
    // 下方代码不起作用,因为 DOM 节点并未被暴露出来:
    // ref.current.style.opacity = 0.5;
  }

  return (
    <form>
      <MyInput placeholder="Enter your name" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}


myInput.js

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

export default MyInput;

不要滥用 ref。 你应当仅在你没法通过 prop 来表达 命令式 行为的时候才使用 ref:例如,滚动到指定节点、聚焦某个节点、触发一次动画,以及选择文本等等。
如果可以通过 prop 实现,那就不应该使用 ref。例如,你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。副作用 可以帮你通过 prop 来暴露一些命令式的行为。

相关推荐
王小明max2 分钟前
Metis UI:下一代 React 组件库,重新定义前端开发体验
react.js
Rasir3 分钟前
第四章:模块化设计与错误处理
前端
Xy9107 分钟前
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
前端
前端的日常7 分钟前
前端如何优化音频和视频的加载性能?
前端
是晓晓吖9 分钟前
在Next.js中,ISR是如何工作的?(译文)
前端
FogLetter10 分钟前
智能前端之拍照识别单词(下):AI集成与交互优化
前端·aigc·openai
yvvvy10 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
满分观察网友z10 分钟前
告别平庸!我用 picker-view 造的这两个选择器,让产品经理闭嘴了
前端
一头小鹿16 分钟前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq66617 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js