梧州网站建设_做个网站多少钱合适_优化落实防控措施_最近一周的重大热点新闻

基本语法

◼ 我们先来回顾一下ref和forwardRef结合使用：

 通过forwardRef可以将ref转发到子组件；

 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中；

◼ forwardRef的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件：

 直接暴露给父组件带来的问题是某些情况的不可控；

 父组件可以拿到DOM后进行任意的操作；

 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作；

◼ 通过useImperativeHandle可以只暴露固定的操作：

 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起；

 所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象；

 比如我调用了 focus函数，甚至可以调用 printHello函数；

语法：

useImperativeHandle(ref, createHandle, [deps])

• ref：外部传入的ref
• createHandle：一个函数，返回需要暴露出去的数据
• [deps]：监听的属性

演示示例

Input.jsx

import React, { memo, forwardRef, useImperativeHandle, useRef } from 'react'const Input = memo(forwardRef((props, ref) => {const inputRef = useRef()// 子组件对父组件传入的ref进行处理// 参数一：外部传入的ref// 参数据二：一个函数，返回需要暴露出去的数据// 参数三（可选）：[deps]--监听的属性useImperativeHandle(ref, () => {return {focus() {console.log('focus');inputRef.current.focus()}}})return (<div>{/**<input type="text" ref={ref} /> */}<input type="text" ref={inputRef} /></div>)
}))export default Input

父组件绑定ref：

import React, { memo, useRef } from "react";
import Input from "./components/Input";const App = memo(() => {const titleRef = useRef()const inputRef = useRef();const handleDom = () => {// console.log(titleRef.current);inputRef.current.focus()inputRef.current.value = ''}return (<div><h3 ref={titleRef}>哈哈哈</h3><button onClick={() => handleDom()}>handleDom</button><Input ref={inputRef}></Input></div>);
});export default App;

自定义暴露出去的数据在.current里面。这样才能使用函数组件内部的方法或属性。