React中ref的使用

时间：2020-06-11 23:24:30 阅读：101 评论：0 收藏：0 [点我收藏+]

标签：回调直接 class export str from turn imp nbsp

1.React中Ref是什么？

　　ref是React提供的用来操纵React组件实例或者DOM元素的接口。

2.ref的作用对象

　　ref可以作用于：

　　　　React组件的实例

 1 class AutoFocusTextInput extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.textInput = React.createRef();
 5   }
 6 
 7   componentDidMount() {
 8     this.textInput.current.focusTextInput();
 9   }
10 
11   render() {
12     return (
13       <CustomTextInput ref={this.textInput} />
14     );
15   }
16 }

　　　　　　Dom元素

1 class MyComponent extends React.Component {
2   constructor(props) {
3     super(props);
4     this.myRef = React.createRef();
5   }
6   render() {
7     return <div ref={this.myRef} />;
8   }
9 }

3.作用于React组件

React组件有两种定义方式：

function
- 对于用function定义的组件是没有办法用ref获取的，原因是： ref回调函数会在组件被挂载之后将组件实例传递给函数。但是使用function定义的函数并没有实例。
- 但是仍然可以获取function定义的组件中的DOM元素，下面会讲
class
- 用class定义的组件由于可以获取组件实例，因此ref函数会在组件挂载的时候将实例传递给组件

将ref回调函数作用于某一个React组件，此时回调函数会在当前组件被实例化并挂载到页面上才会被调用。

ref回调函数被调用时，会将当前组件的实例作为参数传递给函数。

4.Parent Component 如何获取Child component中DOM元素？

首先，能够使用ref的child Component必然是一个类，如果要实现，必然要破坏child component的封装性，直接到child component中获取其中DOM。

5.破坏封装性的获取方式

定义一个ref回调函数
并将该函数绑定Parent Component的this
将该回调函数传递给子组件

子组件中将该函数赋给需要获取的DOM元素的ref

 1 class App extends Component {
 2   constructor(props) {
 3     super(props);
 4     this.getDOM = this.getDOM.bind(this);
 5   }
 6 
 7   getDOM(element) {
 8     this.div = element
 9   }
10 
11   render() {
12     return (
13       <div>
14         <Button getDOM={this.getDOM} />
15       </div>
16     );
17   }
18 }
19 //Button.js
20 export default (props) => (
21   <div>
22     <button ref={props.getDOM} onClick={props.onClick}>this is a button</button>
23   </div>
24 )

6.不破坏封装性的获取方式

父组件定义一个ref函数，将ref赋值给Child component
Child Component中用ref获取到需要的DOM元素
Child Component中定义一个getElement的方法，然后将该DOM元素返回

父组件通过获取Child component再调用getElement即可

 1 //APP.js
 2 class App extends Component {
 3   constructor(props) {
 4     super(props);
 5     this.handleClick = this.handleClick.bind(this);
 6     this.div = React.createRef()
 7   }
 8 
 9   render() {
10     return (
11       <div>
12         <Button ref={this.div}/>
13       </div>
14     );
15   }
16 }
17 //Button.js
18 import React, {Component} from ‘react‘;
19 
20 export default class Button extends Component {
21   constructor(props) {
22     super(props);
23     this.button = React.createRef();
24     this.getButton = this.getButton.bind(this);
25   }
26 
27   getButton() {
28     return this.button
29   }
30 
31   render() {
32     return (
33       <div>
34         <button ref={this.button}>this is a button</button>
35       </div>
36     );
37   }
38 }

React中ref的使用

标签：回调直接 class export str from turn imp nbsp

原文地址：https://www.cnblogs.com/jack-wangsir/p/13096687.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行