在前端开发中，获取 DOM 节点是很常见的需求。如果使用 TypeScript 进行开发，可以通过 ref 获取 DOM 节点。但是，要想在 TypeScript 代码中正确使用 ref，需要遵循一些最佳实践。
什么是 ref
ref 是 React 中用于引用 DOM 元素的属性。在 TypeScript 中，使用 ref 可以获取到 DOM 元素的实例，从而可以对其进行操作。ref 的语法如下：
<input ref={input => (this.inputRef = input)} />;这行代码中，通过 ref 属性将 input 元素的实例存储在 this.inputRef 中。
TypeScript 中的 ref
在使用 TypeScript 时，有几种方法可以正确地使用 ref。
使用 as 关键字
在 TypeScript 中，可以通过 as 关键字来告诉编译器 ref 实际上是 DOM 元素的引用。这种方法的示例如下：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
----- ----------- - -- -- -
----- ------- - -------------------------------
----- ----------- - -- -- -
-------------------------
--
------ -
-----
------ ----------- ------------- --
------- --------------------------- --- --------------
------
--
--
------ ------- ------------这行代码中，将 input 的 ref 属性传递给 useRef，类型为 HTMLInputElement。为了在 handleClick 函数中设置焦点，使用 inputEl.current.focus()。为了避免 TypeScript 报错，使用了可选链语法，以防止 inputEl.current 为 null。
使用 createRef
在 TypeScript 中，可以使用 createRef() 方法来创建 ref。这种方法的示例如下：
-- -------------------- ---- -------
------ ------ - ---------- --------- - ---- --------
----- ----------- ------- --------- -
------- ------- - ------------------------------
------- ----------- - -- -- -
------------------------------
--
-------- -
------ -
-----
------ ----------- ------------------ --
------- -------------------------------- --- --------------
------
--
-
-
------ ------- ------------这行代码中，使用 createRef() 方法来创建 inputEl，类型为 HTMLInputElement，然后将其传递给 input 的 ref 属性。之后，在 handleClick 函数中使用 inputEl.current.focus() 来设置焦点。
使用泛型函数
在 TypeScript 中，可以定义泛型函数来引用 DOM 元素。这种方法的示例如下：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ------------- -
----- --- - ----------------
------ ----
-
----- ----------- - -- -- -
----- ------- - -----------------------------
----- ----------- - -- -- -
-------------------------
--
------ -
-----
------ ----------- ------------- --
------- --------------------------- --- --------------
------
--
--
------ ------- ------------这行代码中，使用泛型函数 useMyRef 定义 ref，并将其传递给 useRef。然后，在 render 函数中，使用 inputEl.current?.focus() 来设置焦点。
结论
在 TypeScript 中，使用 ref 获取 DOM 节点的最佳实践有三种：使用 as 关键字、使用 createRef、使用泛型函数。在实际开发中，可以根据情况选择相应的方法。无论使用哪种方法，都要注意遵循最佳实践，以确保代码正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f656c7c5c563ced5832687