在 React 中選擇 DOM 元素
曾幾何時,每個 JavaScript 開發人員都使用過 getElementById()
方法。它接受一個引數 id
並返回一個具有該 ID 的 HTML 元素。此方法對於手動更改 DOM 非常有用。
抓取一個 HTML 元素節點是一種常見的需要。許多在 JavaScript 方面有經驗但對 React 框架不熟悉的開發人員想知道如何在 React 中執行此操作。
React 中的引用
Refs 是 references 的縮寫,是一種在 React 中訪問 DOM 的簡單方法。為了將元素(或元件)與引用連結,該元素必須具有等於你的 ref 的 ref
屬性。示例 <div>
元素可以通過以下方式連結到 testRef
:<div ref={this.testRef}></div>
。將 ref
例項儲存在變數中是一種很好的做法。
在功能元件中
自從大約兩年前引入鉤子以來,功能元件變得更加健壯。如果你執行的是現代版本的 React(例如 16.8.0),你可以匯入 useRef()
鉤子,它可用於定義一個引用。這是在渲染期間引用隨機變數的功能元件的示例:
function App() {
const elementVariable = useRef(null)
useEffect(() => console.log(elementVariable), [] )
return (
<div ref={elementVariable}>
<h1></h1>
</div>
)
}
在這個例子中,通過設定 elementVariable
等於 useRef()
鉤子的例項,我們將 HTML 節點儲存在變數中。
除非 HTML 元素將 ref
屬性設定為變數名稱,否則 Hook 將無法工作。
傳遞給 useRef()
鉤子的一個引數指定了 ref
例項的初始值。一旦 <div></div>
元素掛載,該變數將儲存 HTML 節點值。這是控制檯的樣子:
在類元件中
長期以來,使用類元件是建立互動式 React 元件的預設方式。
自 16.3 版釋出以來,React 開發人員可以使用 React.createRef()
來建立引用。API 可能不同,但 React.createRef()
和 useRef()
鉤子建立了本質上相同的 ref 例項。
在類元件中,ref
例項儲存在類屬性中。下面是一個例子:
class App extends Component {
constructor(props){
super(props)
this.ref = React.createRef()
}
componentDidMount(){
console.log(this.ref);
}
render() {
return <h1 ref={this.ref}>Referenced Text</h1>;
}
}
如果你檢視控制檯,你將看到一個具有 current
屬性的物件,其中包含 HTML 節點。
使用 React 16.3 以上版本的開發人員必須使用稍微不同的語法來建立 refs。例子:
<div ref={(element) => this.ref = element}></div>
以這種方式建立的引用稱為回撥 ref
,因為我們將 ref
屬性設定為回撥函式,該函式將 HTML 元素作為引數並將此值分配給類例項的 ref
屬性。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn