Reactjs 使用 reactrouterdom 时如何避免Function components cannot be given refs

发布于06月07日

我有以下(使用material 界面)....

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

在新版本中，这会导致以下警告...

警告:不能为功能组件提供参考.试图访问

判断渲染方法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}
    />;
}

但我还是得到了警告.如何解决这个问题？

推荐答案

NavLink from react-router是一个功能组件，是Link的一个专门版本，它为此公开了一个innerRefprops .

// 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://mui.com/getting-started/faq/#how-do-i-use-react-router，链接到https://mui.com/components/buttons/#third-party-routing-library.最后一个链接提供了一个工作示例，并解释了这在react router v6中可能发生的变化