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 节点或实例，并实现更复杂的交互逻辑。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。