Question

我有以下内容（使用Material 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的渲染方法。       在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}
    />;
}

但是我仍然得到警告。我该如何解决这个问题？

Answer 1

只需将其设为 innerRef，

// Client.js
<Input innerRef={inputRef} />

将其用作 ref。

// Input.js
const Input = ({ innerRef }) => {
  return (
    <div>
      <input ref={innerRef} />
    </div>
  )
}

Answer 2

来自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-started/faq/#how-do-i-use-react-router，该链接链接到https://material-ui.com/components/buttons/#third-party-routing-library。最后一个链接提供了一个有效的示例，并解释了这在React-router v6中将如何改变

Answer 3

嗨，您可以使用 refs 代替 ref

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

Answer 4

const renderItem = ({ item, index }) => {

        return (
            <>          
            <Item
                key={item.Id}
                item={item}
                index={index}
            />
            </>
        );
    };

用Fragment解决React.forwardRef()？警告

使用react-router-dom时如何避免“无法给功能组件提供引用”？

4 个答案: