在 React 中如何使用 useRef 进行 DOM 元素的引用?
React 提供了一個叫做 useRef 的 Hook,它可以讓我們在 React 的函式組件中引用 DOM 元素。使用 useRef,我們可以在函式組件中存取 DOM 元素,而不需要使用 class 組件。
使用 useRef 引用 DOM 元素
要使用 useRef 引用 DOM 元素,首先我們需要在函式組件中宣告一個 useRef 的 Hook:
const myRef = useRef(null);
接著,我們可以將這個 useRef Hook 綁定到一個 DOM 元素上:
Hello World!
現在,我們可以使用 myRef 這個 Hook 來存取這個 div 元素:
console.log(myRef.current);
這樣,我們就可以在函式組件中存取 DOM 元素了!
總結
在 React 中,我們可以使用 useRef Hook 來引用 DOM 元素。使用 useRef,我們可以在函式組件中存取 DOM 元素,而不需要使用 class 組件。
使用 useRef 引用 DOM 元素的步驟如下:
- 在函式組件中宣告一個 useRef 的 Hook:
const myRef = useRef(null);
- 將這個 useRef Hook 綁定到一個 DOM 元素上:Hello World!
- 使用 myRef 這個 Hook 來存取這個 div 元素:
console.log(myRef.current);
使用 useRef Hook,我們可以在函式組件中存取 DOM 元素,而不需要使用 class 組件。