forwardRef

`forwardRef` 是 React 提供的一种高级 API,用于在函数组件中转发(forward)`ref` 到子组件的 DOM 元素或类组件。这对于需要直接操作子组件的 DOM 节点或获取子组件实例的情况非常有用。

如何使用`forwardRef`

示例

假设我们有一个自定义的输入框组件 `FancyInput`,我们希望通过父组件能够直接访问这个输入框的 DOM 节点,以便在父组件中调用焦点(focus)等方法。

**1. 创建 `FancyInput` 组件,使用 `React.forwardRef`**

```javascript

import React, { forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => (

<input ref={ref} type="text" className="fancy-input" {...props} />

));

export default FancyInput;

```

在这个例子中,我们使用 `React.forwardRef` 创建了一个函数组件 `FancyInput`。这个组件接收 `props` 和 `ref` 作为参数,并将 `ref` 转发给内部的 `input` 元素。

**2. 在父组件中使用 `FancyInput` 并直接操作其 DOM 节点**

```javascript

import React, { useRef } from 'react';

import FancyInput from './FancyInput';

function App() {

const inputRef = useRef(null);

const handleClick = () => {

if (inputRef.current) {

inputRef.current.focus();

}

};

return (

<div>

<h1>Forward Ref Example</h1>

<FancyInput ref={inputRef} />

<button onClick={handleClick}>Focus the input</button>

</div>

);

}

export default App;

```

在这个例子中,使用 `useRef` 钩子创建了一个 `ref`,然后将这个 `ref` 传递给 `FancyInput` 组件。调用 `handleClick` 函数时,通过 `ref` 获取到 `FancyInput` 内部的 `input` 元素并使其获得焦点。

组合 `forwardRef` 和 `useImperativeHandle`

有时你可能希望在转发 `ref` 的同时自定义暴露给父组件的实例值。你可以使用 `useImperativeHandle` 钩子来实现这一目的。

示例

**修改 `FancyInput` 组件**

```javascript

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

const FancyInput = forwardRef((props, ref) => {

const inputRef = useRef();

useImperativeHandle(ref, () => ({

focus: () => {

inputRef.current.focus();

},

clear: () => {

inputRef.current.value = '';

}

}));

return <input ref={inputRef} type="text" className="fancy-input" {...props} />;

});

export default FancyInput;

```

在这个例子中,我们使用了 `useImperativeHandle` 钩子来自定义暴露给父组件的实例值。现在父组件可以调用 `focus` 和 `clear` 方法。

**在父组件中使用自定义方法**

```javascript

import React, { useRef } from 'react';

import FancyInput from './FancyInput';

function App() {

const inputRef = useRef(null);

const handleFocus = () => {

if (inputRef.current) {

inputRef.current.focus();

}

};

const handleClear = () => {

if (inputRef.current) {

inputRef.current.clear();

}

};

return (

<div>

<h1>Forward Ref with useImperativeHandle</h1>

<FancyInput ref={inputRef} />

<button onClick={handleFocus}>Focus the input</button>

<button onClick={handleClear}>Clear the input</button>

</div>

);

}

export default App;

```

在这个父组件中,我们可以使用 `ref` 调用 `FancyInput` 组件中定义的 `focus` 和 `clear` 方法。

总结

  • **`forwardRef`**:允许你在函数组件中转发 `ref` ,使得父组件能够访问子组件的 DOM 节点或实例。

  • **`useImperativeHandle`**:配合 `forwardRef` 使用,允许你自定义暴露给父组件的实例值,可以使 `ref` 除了能访问 DOM 节点之外还可以调用自定义方法。

通过这些高级 API ,我们可以在函数组件中灵活地操作子组件的 DOM 节点或实例,并实现更复杂的交互逻辑。

相关推荐
誰能久伴不乏23 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端