Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use the Refs attribute in React", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use the Refs attribute in React" article.

1 introduction

The three main properties of the react component:

1.props property: encapsulates the parameters passed to the component

2.state property: the state of the component, when the value changes, re-render the component

3.refs attribute:

(1) through this attribute, you can access the react element (virtual DOM element) in the DOM element or render function-- the proxy (handle) of the DOM element or the react element in the render function.

(2) essentially the instance returned by the ReactDOM.render () function (component instance or DOM node)

Refs is called a resilient file system on a computer. Refs in React provides a way for us to access DOM nodes or React elements created in the render method. In essence, it is the component instance returned by ReactDOM.render (). If it is a rendering component, it is a component instance, and if it is rendering dom, it is a specific dom node.

Function: when Refs, React provides us with a handle to securely access DOM elements or a component instance. In the class component, React uses the first parameter in the ref property as the handle in DOM. In functional components, React can also get ref using hooks's api useRef.

2 use method 2.1 createRef (version > = React16.3)

Refs is typically assigned to instance properties in the constructor for use in other methods of the component.

1. For html elements: you can get element instances

Sample code:

Class Refs extends React.Component {constructor (props) {super (props); / / initialize a ref in the constructor, and then you can use this.myRef = React.createRef (); console.log (this.myRef) in return;} componentDidMount () {/ / call this.myRef.current [XSS _ clean] = "tangerine cats don't get fat" after the render () function is finished. There is a current attribute in / / this.myRef} render () {return ({/ * if the ref attribute is used for html, then its value is the underlying DOM element * /});}

2. You can bind to a class component, which represents an instance of a class component

Sample code:

Class Refs extends React.Component {constructor (props) {super (props); this.myRef = React.createRef ();} componentDidMount () {/ / calls the child component's method this.myRef.current.change () in the parent component } render () {return}} class Children extends React.Component {change () {console.log ("orange cats don't get fat");} render () {return orange cats eat not fat}} 2.2 callback Refs

React will call the ref callback function and pass in DOM when the component is mounted. Yes, call it when unloading and pass in null. Before componentDidMount or componentDidUpdate is triggered, React ensures that refs is up-to-date.

Sample code:

Class Refs extends React.Component {constructor (props) {super (props); this.targetRef = null; this.myRef = (e) = > this.targetRef = e;} componentDidMount () {console.log ("this.refs" + this.refs.container) } render () {return orange cats do not eat fat}} 2.3 String type Refs (out of date, not recommended)

Sample code:

Class Refs extends React.Component {constructor (props) {super (props); this.targetRef = null; this.myRef = (e) = > this.targetRef = e;} componentDidMount () {console.log ("this.refs" + this.refs.container) } render () {return orange cats do not eat fat}} 2.4useRef (React Hooks) function HookRef (props) {const inputElement = useRef () Return ({inputElement.current.focus ()}} > get focus)} above is the content of this article on "how to use Refs attributes in React". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, Please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.