web-dev-qa-db-ja.com

react-router-domを使用するときに「関数コンポーネントに参照を与えることができない」を回避するにはどうすればよいですか？

次のものがあります（マテリアルUIを使用）。..

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のrenderメソッドを確認してください。 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}
    />;
}

しかし、私はまだ警告を受けます。この問題を解決するにはどうすればよいですか？

reactjsreact-routermaterial-ui
14
JGleason

こんにちはrefの代わりにrefsを使用できます

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