1. React中获取元素的方式
- 原生DOM（不保举）
- 通过ref获取（保举）
- 字符串
- 对象
- 回调函数
https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
原生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
根据欣赏器的报错提示Do you mean to use React.forwardRef()?
着实在react中固然拿不到函数式组件的ref，但是可以大概通过React.forwardRef()拿到组件内部的内容，如下
// props吸收父组件的数据；myRef吸收外部传进来的refconst 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转发 |
