使用 React 的 forwardRef 内联或作为组件

Question

我正在玩 React-Bootstrap 的OverlayTrigger ，它要求传递的子组件能够接收一个ref （在文档中说明： https://react-bootstrap.github.io/components/overlays/#over ）

我有以下工作代码：

const Acomponent = forwardRef((props, ref) => {
  return (
    <Button {...props} ref={ref}>
      {props.children}
    </Button>
  );
});

const App = () => {
  return (
    <OverlayTrigger
      key="right"
      placement="right"
      overlay={<Tooltip>Tooltip!!</Tooltip>}
    >
      <Acomponent>My component with a tooltip</Acomponent>
    </OverlayTrigger>
  );
};

有没有办法可以使用forwardRef内联或作为组件来避免所有样板文件？

就像是：

const App = () => {
  return (
    <OverlayTrigger
      key="right"
      placement="right"
      overlay={<Tooltip>Tooltip!!</Tooltip>}
    >
      {
        forwardRef((props, ref) => {
          <Button {...props} ref={ref}>My component with a tooltip</Button>
        }
      }
    </OverlayTrigger>
  );
};

或者：

const App = () => {
  return (
    <OverlayTrigger
      key="right"
      placement="right"
      overlay={<Tooltip>Tooltip!!</Tooltip>}
    >
      <ForwardRefWrapper>
        <Button>My component with a tooltip</Button>
      </ForwardRefWrapper>
    </OverlayTrigger>
  );
};

Answer 1

在您的示例中， AComponent只是呈现一个Button而没有其他内容，并且Button已经接受了一个 ref。 如果是这种情况，您应该能够删除AComponent并执行以下操作：

<OverlayTrigger
  key="right"
  placement="right"
  overlay={<Tooltip>Tooltip!!</Tooltip>}
>
  <Button>My component with a tooltip</Button>
</OverlayTrigger>

但是有可能你简化了它来问你的问题，而AComponent必须做更多的事情。 在这种情况下：不，没有更短的选择。

您的第一个示例不起作用，因为它会在每次App呈现时创建一个全新的组件类型。 由于类型不断变化，因此每次都必须卸载和重新安装，在此过程中清除所有 state。

第二个不起作用，因为ForwardRefWrapper具有与OverlayTrigger相同的问题：如果您只是给了一个带有 function 组件元素的children道具，则无法知道该 function 组件中的哪个元素 ref 是应该传递给。 没办法，除非您编写代码来这样做，这就是 forwardRef 的用途。