Question

我需要使用forwardRef来将引用转发给子组件。下面的方法工作正常，但理想情况下，我不会依赖div元素来包装链接，因为它会使链接的样式尴尬。

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <div ref={innerRef} className="RoleCard" key={props.role.id}>
            <Link
                to={{
                    pathname: `roles/${props.role.slug}`
                }}
            >
                <div className="RoleCard__Inner">
                    <span className="RoleCard__Title">{props.role.title}</span>
                    <div className="RoleCard__Body">
                        {props.role.description}
                    </div>
                </div>
            </Link>
        </div>
    );
});

但是，以下内容不起作用，因为没有转发参考（因为Link实际上是HOC？）。

是否可以通过链接传递innerRef？

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <Link
            ref={innerRef}
            className="RoleCard"
            key={props.role.id}>
            to={{
                pathname: `roles/${props.role.slug}`
            }}
        >
            <div className="RoleCard__Inner">
                <span className="RoleCard__Title">{props.role.title}</span>
                <div className="RoleCard__Body">
                    {props.role.description}
                </div>
            </div>
        </Link>
    );
});

Answer 1

Link组件具有一个innerRef道具，可用于将ref传递给该组件所呈现的元素。

const RoleCard = forwardRef((props, innerRef) => {
  return (
    <Link
      innerRef={innerRef}
      className="RoleCard"
      key={props.role.id}
      to={{
        pathname: `roles/${props.role.slug}`
      }}
    >
      <div className="RoleCard__Inner">
        <span className="RoleCard__Title">{props.role.title}</span>
        <div className="RoleCard__Body">{props.role.description}</div>
      </div>
    </Link>
  );
});

结合使用ForwardRef和链接组件

1 个答案: