Ref attributes and DOM in React

Continuation of a series of translations of the section "Advanced Guides" (Advanced Guides) of the official documentation of the React.js library.

Ref attributes and DOM in React

In a typical React data stream, properties (props) are the only way parents interact with their descendants. To modify a child, you need to re-render (re-render) it with new properties. However, in some cases, you will need to modify the child directly, outside the main thread. Changing a child is possible in cases if it is an instance of a React component or a DOM element. For both of these cases, React has a special way of changing.

Ref callback attribute

React supports a special attribute that can be assigned to any component. The ref attribute accepts a callback function, and calls it after the component is mounted in the DOM or removed from it.

When the ref attribute is used in an HTML element, the callback function takes the base DOM element as an argument. For example, the following code uses the callback function specified in ref to store a reference to the DOM node:

 class CustomTextInput extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { //       (input)     API DOM this.textInput.focus(); } render() { //    `ref`        (input) //   DOM  this.textInput. return ( <div> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Focus the text input" onClick={this.focus} /> </div> ); } } 

React calls the ref callback function with a DOM element as an argument when the component is mounted, and null as an argument when the component is removed.

Using the ref callback to set a property in a class is a common template for accessing DOM elements. The preferred method for setting a property using the callback ref is the one shown in the example above. There is an even shorter way to implement this: ref = {input => this.textInput = input}.

If you previously worked with React, you may be familiar with the old version of the API when the ref attribute is a string, for example, such as "textInput" and the DOM node is available as this.refs.textInput. We do not recommend using this, because There are some problems with lowercase ref , we consider them obsolete and maybe they will be removed in future versions. If you are currently using this.refs.myRefName , we recommend that you proceed to use the template described by us.

When the ref attribute is used in a custom React component, the callback function takes a mounted instance of the component as an argument. For example, if we wanted to wrap the input from the previous example into the CustomTextInput component to simulate a click immediately after mounting:

 class CustomTextInput extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { //       (input)     API DOM this.textInput.focus(); } render() { //    `ref`        (input) //   DOM  this.textInput. return ( <div> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Focus the text input" onClick={this.focus} /> </div> ); } } class AutoFocusTextInput extends React.Component { componentDidMount() { this.textInput.focus(); } render() { return ( <CustomTextInput ref={(input) => { this.textInput = input; }} /> ); } } 

You cannot use the ref attribute with a component built on a function (stateless component), because the function has no instances. However, you can use the ref attribute inside such a component:

 function CustomTextInput(props) { // textInput  , ..   ref    let textInput = null; function handleClick() { textInput.focus(); } return ( <div> <input type="text" ref={(input) => { textInput = input; }} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); } 

Do not abuse callbacks ref

Your first thought might be that using a ref "turns the dream into reality" in your application. If this is the case, stop and critically consider whether the states are correctly located in your component hierarchy. Often there is such a situation that a repositioning of the state is higher in the hierarchy of components than it is at the moment, solves the problem. See the Lifting Status Guide above for an example of this.

The following parts:

• Uncontrolled components in React.
• Performance optimization in React.

Previous parts:

• PropTypes - type checking in React.
• JSX - details.

Original Source: React - Advanced Guides - Refs and the DOM