Warning: Function components cannot be given refs

[jackiehluo]

Getting this error on the latest alpha (4.0.0-alpha.5):

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

    Check the render method of `Trigger`.

Looks like an issue from converting from class components to functional components?

[mogzol]

I worked around this by first determining if the child is functional using this check. You can obviously skip this if you already know for sure that the child will be a functional component:

function isFunctional(component) {
  return (
    typeof component === "function" &&
    !(component.prototype && component.prototype.isReactComponent)
  );
}

And then if it is a functional component, I just ignore the ref like this:

const IgnoreRef = React.forwardRef((props, ref) => {
  const child = React.Children.only(props.children) as React.ReactElement;
  return React.cloneElement(child, { ...props, ...child.props });
}) as any;

...

<Trigger ... >
  <IgnoreRef>
    <MyComponent ... />
  </IgnoreRef>
</Trigger>

It would be nice though if rc-trigger could do something like this internally so we don't have to worry about it.

[mogzol]

Made a PR to fix this: #156

[afc163]

same issue ant-design/ant-design#21873