I am working with a third-party component which doesn't forward the ref to its DOM component and unfortunately, I need to get a ref to its DOM element in my code.
The code below obviously fails:
const ThirdPartyComponent = (props) => {
return <div>I'm a third party component</div>;
};
const MyComponent = () => {
const ref = useRef();
return <ThirdPartyComponent ref={ref} />;
};
"Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
See codesandbox here.
Is there anyway to get a ref to the DOM element inside the third party component? I'm aware of the deprecated findDOMNode API. I'm not too keen on it, but even though, I did not manage to make it work.
Note: I know that what I'm asking for is not considered as good practice. The reason I'm doing this is to have react-beautiful-dnd work with DevExtreme's Reactive Grid. Draggable components expects a ref to the draggable elements (the <tr>s here, which I don't have). Just trying to simplify the question.
