React - Ref (referencje)

Opublikowano ndz 15 listopada 2020 w reactjs • 2 min read

react-ref

React.createRef()/useRef

React.createRef() oraz hook useRef pozwala na dostęp do elementów drzewa DOM (faktycznego, a nie wirtualnego) w sposób bezpośredni

Dokumentacja Reacta wspomina o 3 głównych przypadkach, w których warto skorzystać z funkcji referencji - zarządzanie focusem, wyborem tekstu, uruchamianiem mediów - zarządzanie animacjami - integracja z bibliotekami (DOM) -> patrz: przekazywanie referencji

Działanie

Możemy uzyskać referencje do węzła DOM poprzez stworzenie oraz przekazania odpowiedniego odwołania do wybranego elementu/dziecka danego komponentu i w ten sposób uzyskać dostęp do jego atrybutu poprzez odwołanie się do metody current np. this.exampleRef.current. W ten sposób możemy uzyskać również dostęp do wartości "przechowywanej" przez dany węzeł drzewa DOM -> np. this.textInput.current.value

See the Pen React Ref - createRef by Mikołaj Kostyrko (@mkostyrko) on CodePen.

(źródło wyżej zamieszczonego przykładu CSS-Tricks Working with refs in React)

Ref jako funkcja zwrotna (callback)

:: Instancja :: - pojedyncze wystąpienie niezależnego kodu zgodnego z danym wzorcem (za: wikipedia) np. klasa (samochód) oraz instancje (polo, mini, golf)

Istnieje możliwość przekazania jako atrybut ref funkcji zwrotnej, która będzie przechowywała referencję do danego węzła drzewa DOM we właściwości danej instacji

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

// komponent Input -> input.js
const Input = props => {
    return (
        <div>
        <input type="text" ref={props.inputRef} />
        </div>
    );
};

// App.js
class App extends React.Component {
    state = {
        value: ''
    };

    handleSubmit = event => {
        this.setState({ value: this.inputElement.value });
    };

    render() {
        return (
            <div>
                <h1>React Ref - Callback Ref</h1>
                <h3>Value: {this.state.value}</h3>
                <Input inputRef={el => (this.inputElement = el)} />
                <button onClick={this.handleSubmit}>Submit</button>
            </div>
        );
    }
}

(źródło poniżej zamieszczonego przykładu CSS-Tricks Working with refs in React)

React.forwardRef() - Przekazywanie referencji

Przekazywanie referencji na jej podaniu z rodzica do dziecka w celu dostępu przez rodzica do jego atrybutów (np. w celu aktualizacji stanu)

źródło poniżeszgo przykładu oraz cytatu: reactjs.org- Przekazywanie referencji

function FancyButton(props) {
return (
    <button className="FancyButton">
    {props.children}
    </button>
);
}

"FancyButton używa React.forwardRef, by przejąć przekazaną do niego referencję i przekazać ją dalej do elementu button"

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
    {props.children}
</button>
));

// Możesz teraz otrzymać bezpośrednią referencję do elementu „button”:
const ref = React.createRef();
<FancyButton ref={ref}>Kliknij mnie!</FancyButton>;