#26 React+Typescipt useRef类型示例

在React和TypeScript的组合使用中，useRef是一个常用的Hook，它可以用来访问DOM元素或者在组件的整个生命周期内持久存储一个可变的值。下面的示例展示了如何在TypeScript环境中使用useRef。

1. 访问DOM元素

使用useRef来访问DOM元素，需要为useRef提供正确的类型注解。这里，我们使用HTMLInputElement来指定我们想要引用的DOM元素类型。

import React, { useRef, useEffect } from 'react';

const TextInputWithFocusButton: React.FC = () => {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 当inputEl不为null时，直接访问input元素
    inputEl.current?.focus();
  };

  return (
    <>
      
      Focus the input
    
  );
};

2. 存储当前值

useRef也可以用来存储一个组件生命周期内的任何可变值，而且这个值的变化不会引起组件的重新渲染。

<