React 中获取元素的方式
- 字符串
- 对象
- 回调函数
官方文档：https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
第一种
- 传统方式(在 React 中及其不推荐)
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); } render() { console.log('App-render-被调用'); return ( <div> <p id={'box'}>我是段落</p> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { let oP = document.getElementById('box'); oP.innerHTML = 'www.it6666.top'; console.log(oP); } } export default App;
第二种
- 通过
ref='字符串'/this.refs.字符串(通过字符串的方式即将被废弃, 也不推荐)
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); } render() { console.log('App-render-被调用'); return ( <div> <p ref={'box'}>我是段落</p> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { let oP = this.refs.box; oP.innerHTML = 'www.it6666.top'; console.log(oP); } } export default App;
第三种
- 通过
createRef()创建一个对象, 然后将这个对象传递给 ref (推荐)
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); this.oPRef = React.createRef(); } render() { console.log('App-render-被调用'); return ( <div> <p ref={this.oPRef}>我是段落</p> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { let oP = this.oPRef.current; oP.innerHTML = 'www.it6666.top'; console.log(oP); } } export default App;
第四种
- 通过传递一个回调函数, 然后保存回调函数参数的方式(推荐)
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); this.oPRef = null; } render() { console.log('App-render-被调用'); return ( <div> <p ref={(args) => { this.oPRef = args }}>我是段落</p> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { this.oPRef.innerHTML = 'www.it6666.top'; console.log(this.oPRef); } } export default App;
React 中 Ref 注意点
- 获取原生元素, 拿到的是元素本身
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ( <div> <p ref={this.myRef}>我是段落</p> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { console.log(this.myRef.current); } } export default App;
- 获取类组件元素, 拿到的是组件的实例对象
import React from "react"; class Home extends React.PureComponent { render() { return ( <div>Home</div> ) } } class App extends React.PureComponent { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ( <div> <Home ref={this.myRef}/> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { console.log(this.myRef.current); } } export default App;
- 获取函数组件元素, 拿不到任何内容
import React from "react"; function About() { return ( <div>About</div> ) } class App extends React.PureComponent { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ( <div> <About ref={this.myRef}/> <button onClick={() => { this.btnClick() }}>APP按钮 </button> </div> ) } btnClick() { console.log(this.myRef.current); } } export default App;
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
