Перенаправлення рефів — це техніка для автоматичної передачі рефа від компонента до одного із його дітей. Для більшості компонентів, зазвичай, вона не є необхідною. Тим не менше, може бути корисною в деяких випадках, особливо якщо ви пишете бібліотеку. Давайте розглянемо найбільш поширені сценарії.
\nРозглянемо компонент FancyButton, який рендерить нативний DOM-елемент button:\n
function FancyButton(props) {\n return (\n <button className=\"FancyButton\">\n {props.children}\n </button>\n );\n}React-компоненти приховують деталі своєї реалізації та результат рендеренгу. Також іншим компонентам, які використовують FancyButton, зазвичай не потрібен доступ до рефа його внутрішньому DOM-елементу button. І це добре тим, що це запобігає надмірній залежності компонентів від структури DOM-у один одного.
Хоча, така інкапсуляція є бажаною для компонентів, які описують певну закінчену частину додатка, наприклад, FeedStory або Comment, це може бути незручним для часто перевикористовуваних “дрібних” компонентів, таких як FancyButton та MyTextInput. Ці компоненти використовуються в додатку подібно до звичайних DOM button чи input і доступ до їхніх DOM-вузлів може бути необхідним для управління фокусом, виділенням або анімацією.
Перенаправлення рефів дає можливість певному компоненту взяти отриманий реф і передати його далі (іншими словами “перенаправити”) до дочірнього компонента.
\nУ прикладі нижче, FancyButton використовує React.forwardRef, щоб отримати переданий йому ref і перенаправити його в DOM button, який він рендерить:
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className=\"FancyButton\"> {props.children}\n </button>\n));\n\n// Тепер ви можете отримати реф беспосередньо на DOM button\nconst ref = React.createRef();\n<FancyButton ref={ref}>Click me!</FancyButton>;Таким чином, компоненти, що використовують FancyButton можуть отримати реф внутрішнього DOM-вузла button і якщо потрібно, мати доступ до DOM button подібно до того, якби він використовувався напряму.
Розглянемо цей приклад покроково:
\nReact.createRef і записуєм його у змінну ref.ref у <FancyButton ref={ref}>, вказуючи його як JSX-атрибут.ref у функцію (props, ref) => ... всередині forwardRef другим аргументом.ref далі у <button ref={ref}>, вказуючи його як JSX-атрибут.ref.current буде вказувати на DOM-вузол <button>.\n\nПримітка
\nДругий аргумент
\nrefіснує тільки тоді, коли ви визначаєте компонент як виклик функціїReact.forwardRef. Звичайні функціональні або класові компоненти не отримуютьrefу якості аргумента чи пропса.Перенаправлення рефів не обмежуються DOM-компонентами. Ви також можете перенаправити реф у екземпляр класового компонента.
\n
Коли ви починаєте використовувати forwardRef у бібліотеці компонентів, ви повинні вважати це як несумісну зміну і випустити нову мажорну версію. Причина цього в тому, що, швидше за все, компонент буде мати помітно іншу поведінку (наприклад: зміниться тип експортованих даних і елемент, до якого прив’язаний реф), в результаті чого додатки та інші бібліотеки, що покладаються на стару поведінку, перестануть працювати.
З цієї ж причини ми не рекомендуємо викликати React.forwardRef умовно (тобто перевіряючи чи функція існує). Це змінить поведінку вашої бібліотеки і додатки ваших користувачів можуть перестати працювати при оновленні версії React.
Ця техніка також може бути особливо корисною у компонентах вищого порядку (ще відомі, як КВП або англ. — HOC). Давайте почнемо з прикладу КВП, який виводить пропси компонента в консоль:\n
function logProps(WrappedComponent) { class LogProps extends React.Component {\n componentDidUpdate(prevProps) {\n console.log('old props:', prevProps);\n console.log('new props:', this.props);\n }\n\n render() {\n return <WrappedComponent {...this.props} />; }\n }\n\n return LogProps;\n}КВП “logProps” передає всі props до компонента, який він обгортає, так що результат рендеру буде такий самий. Наприклад, ми можемо використати цей КВП, щоб вивести усі пропси передані в наш компонент FancyButton:\n
class FancyButton extends React.Component {\n focus() {\n // ...\n }\n\n // ...\n}\n\n// Замість того, щоб експортувати FancyButton, ми експортуємо LogProps.\n// При цьому рендеритись буде FancyButton.\nexport default logProps(FancyButton);Щодо прикладу вище є одне застереження: тут рефи не будуть передаватись. Це тому, що ref не є пропом. React опрацьовує ref по-іншому, подібно до key. Якщо ви додасте реф до КВП, реф буде вказувати на зовнішній компонент-контейнер, а не на обгорнутий компонент.
Це означає, що рефи призначені для компонента FancyButton насправді будуть прив’язані до компонента LogProps:\n
import FancyButton from './FancyButton';\n\nconst ref = React.createRef();\n// Компонент FancyButton, який ми імпортуємо — це КВП LogProps.\n// Навіть, якщо результат рендерингу буде таким же самим,\n// Наш реф буде вказувати на LogProps, а не на внутрішній компонент FancyButton!\n// Це означає, що ми, наприклад, не можемо викликати ref.current.focus()\n<FancyButton\n label=\"Click Me\"\n handleClick={handleClick}\n ref={ref}/>;На щастя, ми можемо явно перенаправити реф до внутрішнього компонента FancyButton, використовуючи React.forwardRef API. React.forwardRef приймає функцію рендеринга, яка отримує параметри props і ref та повертає React-вузол. Наприклад:\n
function logProps(Component) {\n class LogProps extends React.Component {\n componentDidUpdate(prevProps) {\n console.log('old props:', prevProps);\n console.log('new props:', this.props);\n }\n\n render() {\n const {forwardedRef, ...rest} = this.props;\n // Передаємо в якості рефа проп \"forwardedRef\"\n return <Component ref={forwardedRef} {...rest} />; }\n }\n\n // Зауважте, другий параметр \"ref\" переданий від React.forwardRef.\n // Ми можемо передати його в LogProps, як звичайний проп, наприклад: \"forwardedRef\",\n // А потім прив'язати його до компоненту.\n return React.forwardRef((props, ref) => { return <LogProps {...props} forwardedRef={ref} />; });}React.forwardRef отримує фукнцію рендерингу. React DevTools використовує цю функцію, щоб визначити, як відображати компонент перенаправлення рефа.
Наприклад, наступний компонент буде відображатись в DevTools, як ”ForwardRef“:
\nconst WrappedComponent = React.forwardRef((props, ref) => {\n return <LogProps {...props} forwardedRef={ref} />;\n});Якщо надати ім’я функції рендеринга, то воно з’явиться у назві компонента в DevTools (наприклад, ”ForwardRef(myFunction)”):
\nconst WrappedComponent = React.forwardRef(\n function myFunction(props, ref) {\n return <LogProps {...props} forwardedRef={ref} />;\n }\n);Ви можете навіть додати властивість до функції displayName і вказати в ній, який саме компонент обгорнутий.
function logProps(Component) {\n class LogProps extends React.Component {\n // ...\n }\n\n function forwardRef(props, ref) {\n return <LogProps {...props} forwardedRef={ref} />;\n }\n\n // Дамо цьому компоненту більш зрозуміле ім'я в DevTools\n // Наприклад, \"ForwardRef(logProps(MyComponent))\"\n const name = Component.displayName || Component.name; forwardRef.displayName = `logProps(${name})`;\n return React.forwardRef(forwardRef);\n}