React-Ref

1. React中获取元素的方式

原生DOM（不保举）
通过ref获取（保举）
字符串
对象
回调函数
原生DOM获取元素（不保举）
非常非常不保举，由于这种情况是通过拿到真实DOM，而react创建元素大多数时间是通过假造DOM创建的

2. import React from 'react';
3. class App extends React.PureComponent{
4.    
5.     constructor(props){
6.    
7.         super(props);
8.     }
9.     render(){
10.    
11.         console.log('App-render被调用');
12.         return (
13.             <div>
14.                 <p id={
15.    'box'}>我是段落</p>
16.                 <button onClick={
17.    ()=>{
18.    this.btnClick()}}>APP按钮</button>
19.             </div>
20.         )
21.     }
22.     btnClick(){
23.    
24.         // 第一种获取方式: 传统方式(在React中及其不推荐)
25.         let oP = document.getElementById('box');
26.         oP.innerHTML = 'www.it666.com';
27.         console.log(oP);
28.     }
29. }
30. export default App;

复制代码

第二种方式：通过refs团结字符串举行获取（react即将废弃）

通过ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不保举)

2. import React from 'react';
3. class App extends React.PureComponent{
4.    
5.     constructor(props){
6.    
7.         super(props);
8.     }
9.     render(){
10.    
11.         console.log('App-render被调用');
12.         return (
13.             <div>
14.                 // 1. 给获取的元素添加refs
15.                 <p ref={
16.    'box'}>我是段落</p>
17.                 <button onClick={
18.    ()=>{
19.    this.btnClick()}}>APP按钮</button>
20.             </div>
21.         )
22.     }
23.     btnClick(){
24.    
25.         // 第二种获取方式: 通过ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不推荐)
26.         let oP = this.refs.box;
27.         oP.innerHTML = 'www.it666.com';
28.         console.log(oP);
29.     }
30. }
31. export default App;

复制代码

第三种获取方式：通过refs+对象获取

通过createRef()创建一个对象, 然后将这个对象通报给ref (保举)

2. import React from 'react';
3. class App extends React.PureComponent{
4.    
5.     constructor(props){
6.    
7.         super(props);
8. // 1.先创建一个Ref对象
9.         this.oPRef = React.createRef();
10.         this.oPRef = null;
11.     }
12.     render(){
13.    
14.         console.log('App-render被调用');
15.         return (
16.             <div>
17.                 <p ref={
18.    this.oPRef}>我是段落</p>
19.                 <button onClick={
20.    ()=>{
21.    this.btnClick()}}>APP按钮</button>
22.             </div>
23.         )
24.     }
25.     btnClick(){
26.    
27.        // 2. 第三种获取方式: 通过createRef()创建一个对象, 然后将这个对象传递给ref (推荐)
28.         let oP = this.oPRef.current;
29.         oP.innerHTML = 'www.it666.com';
30.         console.log(oP);
31.     }
32. }
33. export default App;

复制代码

第四种方式：通过函数返回组件内容

第四种获取方式: 通过通报一个回调函数, 然后生存回调函数参数的方式(保举)

2. import React from 'react';
3. class App extends React.PureComponent{
4.    
5.     constructor(props){
6.    
7.         super(props);
8.         // 定义一个变量对象为空
9.         this.oPRef = null;
10.     }
11.     render(){
12.    
13.         console.log('App-render被调用');
14.         return (
15.             <div>
16.               //参数就是该元素，将arg赋值给OPRef
17.                 <p ref={
18.    (arg)=>{
19.    this.oPRef = arg}}>我是段落</p>
20.                 <button onClick={
21.    ()=>{
22.    this.btnClick()}}>APP按钮</button>
23.             </div>
24.         )
25.     }
26.     btnClick(){
27.    
28.         // 第四种获取方式: 通过传递一个回调函数, 然后保存回调函数参数的方式(推荐)
29.         let oP = this.oPRef;
30.         oP.innerHTML = 'www.it666.com';
31.         console.log(oP);
32.     }
33. }
34. export default App;

复制代码

根据欣赏器的报错提示Do you mean to use React.forwardRef()?
其着实react中固然拿不到函数式组件的ref，但是可以大概通过React.forwardRef()拿到组件内部的内容，如下

2. // props接收父组件的数据；myRef接收外部传进来的ref
3. const About = React.forwardRef(function(props, myRef) {
4.     // myRef === this.myRef
5.     return (
6.         <div>
7.             <p>我是段落</p>
8.             <span ref={
9.    myRef}>我是span</span>
10.         </div>
11.     )
12. });
13. class App extends React.PureComponent{
14.    
15.     constructor(props){
16.    
17.         super(props);
18.         this.myRef = React.createRef();
19.     }
20.     render(){
21.    
22.         return (
23.             <div>
24. // 在自定义组件外部赋予属性ref={this.myRef}
25.                 <About ref={
26.    this.myRef}/>
27.                 <button onClick={
28.    ()=>{
29.    this.btnClick()}}>APP按钮</button>
30.             </div>
31.         )
32.     }
33.     btnClick(){
34.    
35.         console.log(this.myRef.current);
36. //   <span>我是span</span>
37.     }
38. }
39. export default App;

复制代码

这种征象叫做Ref转发