1. React中获取元素的方式
- 原生DOM（不推荐）
- 通过ref获取（推荐）
原生DOM获取元素（不推荐）
非常非常不推荐，因为这种情况是通过拿到真实DOM，而react创建元素大多数时候是通过虚拟DOM创建的
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(){ // 第一种获取方式: 传统方式(在React中及其不推荐) let oP = document.getElementById('box'); oP.innerHTML = 'www.it666.com'; console.log(oP); } } export default App;
第二种方式：通过refs结合字符串进行获取（react即将废弃）
通过ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不推荐)
import React from 'react'; class App extends React.PureComponent{ constructor(props){ super(props); } render(){ console.log('App-render被调用'); return ( <div> // 1. 给获取的元素添加refs <p ref={'box'}>我是段落</p> <button onClick={()=>{this.btnClick()}}>APP按钮</button> </div> ) } btnClick(){ // 第二种获取方式: 通过ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不推荐) let oP = this.refs.box; oP.innerHTML = 'www.it666.com'; console.log(oP); } } export default App;
第三种获取方式：通过refs+对象获取
通过createRef()创建一个对象, 然后将这个对象传递给ref (推荐)
import React from 'react'; class App extends React.PureComponent{ constructor(props){ super(props); // 1.先创建一个Ref对象 this.oPRef = React.createRef(); this.oPRef = null; } render(){ console.log('App-render被调用'); return ( <div> <p ref={this.oPRef}>我是段落</p> <button onClick={()=>{this.btnClick()}}>APP按钮</button> </div> ) } btnClick(){ // 2. 第三种获取方式: 通过createRef()创建一个对象, 然后将这个对象传递给ref (推荐) let oP = this.oPRef.current; oP.innerHTML = 'www.it666.com'; 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> //参数就是该元素，将arg赋值给OPRef <p ref={(arg)=>{this.oPRef = arg}}>我是段落</p> <button onClick={()=>{this.btnClick()}}>APP按钮</button> </div> ) } btnClick(){ // 第四种获取方式: 通过传递一个回调函数, 然后保存回调函数参数的方式(推荐) let oP = this.oPRef; oP.innerHTML = 'www.it666.com'; console.log(oP); } } export default App;
React中获取元素注意点
- 获取原生元素, 拿到的是元素本身
- 获取类组件元素, 拿到的是组件实例对象
- 获取函数组件元素, 拿不到任何内容
https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
网络异常，图片无法展示|
函数式组件ref.png
根据浏览器的报错提示Do you mean to use React.forwardRef()?
其实在react中虽然拿不到函数式组件的ref，但是能够通过React.forwardRef()拿到组件内部的内容，如下
// props接收父组件的数据；myRef接收外部传进来的ref const About = React.forwardRef(function(props, myRef) { // myRef === this.myRef return ( <div> <p>我是段落</p> <span ref={myRef}>我是span</span> </div> ) }); class App extends React.PureComponent{ constructor(props){ super(props); this.myRef = React.createRef(); } render(){ return ( <div> // 在自定义组件外部赋予属性ref={this.myRef} <About ref={this.myRef}/> <button onClick={()=>{this.btnClick()}}>APP按钮</button> </div> ) } btnClick(){ console.log(this.myRef.current); // <span>我是span</span> } } export default App;
这种现象叫做Ref转发
