web-dev-qa-db-fra.com

Comment éviter que les composants de fonction ne puissent pas être référencés lors de l'utilisation de react-router-dom?

J'ai les éléments suivants (en utilisant l'interface utilisateur matérielle) ....

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}
    />;
}

Dans les nouvelles versions, cela provoque l'avertissement suivant ...

Avertissement: les composants de fonction ne peuvent pas recevoir de références. Les tentatives d'accès à cette référence échoueront. Vouliez-vous utiliser React.forwardRef ()?

Vérifiez la méthode de rendu de ForwardRef. dans NavLink (créé par ForwardRef)

J'ai essayé de changer pour ...

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}
    />;
}

Mais je reçois toujours l'avertissement. Comment résoudre ce problème?

reactjsreact-routermaterial-ui
14
JGleason

Salut Vous pouvez utiliser refs au lieu de ref

    <InputText
        label="Phone Number"
        name="phoneNumber"
        refs={register({ required: true })}
        error={errors.phoneNumber ? true : false}
        icon={MailIcon}
   />
0
Inamur Rahman