React useRef 组件内及组件传参使用

保存变量, 改变不引起渲染
js 复制代码
import { useRef} from 'react';
const dataRef = useRef(null)
...
dataRef.current = setTimeout(()=>console.log('...'),1000)
绑定dom
js 复制代码
const inputRef = useRef(null)
<input ref = {inputRef} />
绑定dom列表 - ref 回调
js 复制代码
const itemsRef = useRef({})
{catList.map(cat => (
  <li
    key={cat.id}
    ref={(node) => {
      const map = getMap();
      if (node) {
        itemsRef.current[cat.id] = node;
      } else {
        delete itemsRef.current[cat.id]
      }
    }}
  >
    {cat.id}
  </li>
))}
访问子组件属性

将 ref 放在自定义组件上,默认情况下会得到 null。因为默认情况下,React 不允许组件访问其他组件的 DOM 节点。手动操作另一个组件的 DOM 节点会使你的代码更加脆弱。

想要暴露其 DOM 节点的组件必须选择该行为。一个组件可以指定将它的 ref "转发"给一个子组件。

js 复制代码
// 父组件
const inputRef = useRef(null);
<MyInput ref={inputRef} /> // 1. 告诉 React 将对应的 DOM 节点放入 inputRef.current 中。但是这取决于 MyInput 组件是否允许,默认不允许。

// 子组件 MyInput 
import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => { // 2. forwardRef 接受父组件的 inputRef 作为第二个参数 ref 传入组件,第一个参数是 props。
  return (
  	<input {...props} ref={ref} /> // 3. 将 ref 传递给 <input>
  )
});
使用 useImperativeHandle 暴露 API
js 复制代码
import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // 只暴露 focus,没有别的
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

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

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        聚焦输入框
      </button>
    </>
  );
}
相关推荐
liliangcsdn几秒前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero4 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui7 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚9 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴10 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常15 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常17 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾18 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101820 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端