Как мне избежать «Компонентам функций нельзя давать ссылки» при использовании response-router-dom? - PullRequest
Новая
       19

Как мне избежать «Компонентам функций нельзя давать ссылки» при использовании response-router-dom?

5 голосов
/ 06 июня 2019

У меня есть следующее (с помощью пользовательского интерфейса материала) .... 

import React from "react";
import { NavLink } from "react-router-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
function LinkTab(link){
    return <Tab component={NavLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    />;
}

В новых версиях это вызывает следующее предупреждение ...

Предупреждение: функциональные компоненты не могут быть предоставлены ссылки. Попытки доступа этот реф не получится. Вы хотели использовать React.forwardRef ()?

Проверьте метод рендеринга ForwardRef. в NavLink (создан ForwardRef)

Я пытался перейти на ... 

function LinkTab(link){
    // See https://material-ui.com/guides/composition/#caveat-with-refs
    const MyLink = React.forwardRef((props, ref) => <NavLink {...props} ref={ref} />);
    return <Tab component={MyLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    />;
}

Но я все еще получаю предупреждение. Как мне решить эту проблему?

1 Ответ

4 голосов
/ 07 июня 2019

NavLink из react-router - это функциональный компонент, представляющий собой специализированную версию Link , которая предоставляет innerRef реквизит для этой цели. 

// required for react-router-dom < 6.0.0
// see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678
const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);

Вы можете 'Мы также искали в наших документах react-router, что приводит вас к https://material -ui.com / Getting-Start / Faq / # How-Do-I-Use-Reaction-router , который ссылается на https://material -ui.com / компоненты / кнопки / # третьей сторона маршрутизация библиотека .Последняя ссылка предоставляет рабочий пример, а также объясняет, как это, вероятно, изменится в response-router v6

.
...