React refs how are they used, and when are they used?

前端 未结 2 1398
青春惊慌失措
青春惊慌失措 2021-01-23 17:06

Hello and thank you for reading this question!

I have been learning React for some weeks and I have difficulties trying to understand how refs

相关标签:
2条回答
  • 2021-01-23 17:29

    React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

    When you write

    <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
    

    React extracts the ref attribute and invokes a callback after the component is mounted. In that callback function react passes the instance of the input, which is what you get as the parameter here. Think of the above as a function

    <input
          type="text"
          ref={this.callback} />
    

    and that callback will look like

    const callback = (input) => { 
       this.textInput = input; 
    }
    

    According to the docs:

    When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

    Regarding your next question:

    However I do not understand why the parameter being passed to the refs is (input) what could happen if there were jsx tags nested

    The parameter being passed to div is just referenced as input in your example, you can call it anything you want, like input, inputRef, instance

    In multiple jsx tags are nested, the ref is applied on the element on which ref attribute is passed. For instance

    <div ref={this.getRef}>
       <div>Hello React</div>
    </div>
    

    The ref gets the instance of is applied to the outer div from which you can access the child elements.

    Codesandbox

    Also is there not a clear way to reference the elements being created with React render/return

    Well refs is a way provided by React to reference, elements being created. However you should only use refs when

    • Managing focus, text selection, or media playback.
    • Triggering imperative animations.
    • Integrating with third-party DOM libraries.

    Most often, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. For example if you wish to change the class on an element, instead of getting an access to the element and changing it class, you would pass the dynamic prop to it instead like

    <div className={this.props.className} />
    

    Or as a matter of fact, use state to make necessary updates

    0 讨论(0)
  • 2021-01-23 17:29

    To explain what is happening with the ref tag, let's break it down into smaller pieces...

    This block:

    <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
    

    Says to call this (input) => { this.textInput = input; } when this input field is mounted and unmounted. The (input) is just a parameter name, and you could call it whatever you want. So you could rewrite it as:

    <input
              type="text"
              ref={(myinputfield) => { this.textInput = myinputfield; }} />
    

    And it will do the same thing. In both case, input and myinputfield both reference the text field on which the ref attribute was defined.

    For your second question,

    Also is there not a clear way to reference the elements being created with React render/return? I am talking about something like object oriented programming: className.instanceName or creating instance from the HTML elements with: new elementName().

    The react model is a bit different. state is the primary way to have components interact with each other, rather than one component calling another. It's not entirely clear what you're trying to do, but when you want to update one component based on some action another component does, you would typically update the state, which would re-render the components with the new state.

    You can still lookup other components in the DOM, but I'd encourage you to think more in the react model that uses state to update components.

    0 讨论(0)
提交回复
热议问题