无法在react-router 4中使用ref对Link组件进行.focus()

Question

我正在使用 React-router (v4) 中的 Link 组件。我可以将引用附加到该组件并控制台记录该引用。

但是，如果我调用 linkRef.current.focus() 我会收到错误：

linkRef.current.focus() is not a function

我可以将innerRef附加到Link组件，并且.focus将起作用。但是当我这样做时，我在控制台中收到一个错误，指出“警告：失败的道具类型：提供给“链接”的道具“innerRef”无效，需要[字符串，函数]类型之一”

有没有办法可以使用 ref 来关注 React-router 4 中的 Link 组件，或者至少防止 innerRef 错误？

示例：

下面的例子展示了我想要实现的目标。本质上，当单击按钮时，我试图将焦点转移到带有 ref 的链接元素。虽然当我使用 innerRef 而不是 ref 作为 LinkWrapper 上的 prop 时这将起作用并改变焦点，但它会抛出控制台错误。

但是，如果我使用 ref 则不会发生任何事情，焦点仍保留在按钮上。

const TestComponent = () => {

const linkRef = React.useRef()

const testFunction = () => {
   linkRef?.current?.focus()
}

return (
<div>
  <button onClick={() => testFunction()}>Focus button here</button>
  <Link ref={linkRef} to={'/testUrl.com'}>Test Here</Link>
</div>
)
}

Answer 1

react-router@4

Link

组件不会像

react@16

中介绍的那样转发任何 React 引用，但它会显示一个

innerRef

属性，可以传递 React 引用。

参见

react-router@4

链接

class Link extends React.Component {
  handleClick(event, history) {
    if (this.props.onClick) this.props.onClick(event);

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      const method = this.props.replace ? history.replace : history.push;

      method(this.props.to);
    }
  }

  render() {
    const { innerRef, replace, to, ...rest } = this.props; // eslint-disable-line no-unused-vars

    return (
      <RouterContext.Consumer>
        {context => {
          invariant(context, "You should not use <Link> outside a <Router>");

          const location =
            typeof to === "string"
              ? createLocation(to, null, null, context.location)
              : to;
          const href = location ? context.history.createHref(location) : "";

          return (
            <a
              {...rest}
              onClick={event => this.handleClick(event, context.history)}
              href={href}
              ref={innerRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

const innerRefType = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.func,
  PropTypes.shape({ current: PropTypes.any })
]);

Link.propTypes = {
  innerRef: innerRefType,
  onClick: PropTypes.func,
  replace: PropTypes.bool,
  target: PropTypes.string,
  to: toType.isRequired
};

它看起来像一个正常的（按照今天的标准）React ref将被允许通过，但它看起来并不完全具有正确的形状。不过，您可以使用旧的遗留函数方法来设置 React ref。

innerRef={ref => linkRef.current = ref}

代码：

<div>
  <button type="button" onClick={() => linkRef.current.focus()}>
    Focus Link
  </button>
</div>

<Link innerRef={(ref) => (linkRef.current = ref)} to={"/testUrl.com"}>
  Test Here
</Link>

锚标记

<a>

具有浏览器焦点并且可交互，似乎缺少一些应用可见焦点的CSS。