How to properly use refs in React functional components

Question

The docs say this:

You may not use the ref attribute on function components because they don't have instances.

Is this to say that we shouldn't be using refs anymore in React? What is the pattern for accessing the native DOM elements properly in functional react components if not refs? This is so you can pass a ref to a function component, not to a native DOM tag.

Answer 1

你可以像过去一样使用 document.getElementById()

Answer 2

The documentation says that you can use them in functional components, but not on them:

const MyComponent = <div ref={OK} />
const SecondComponent = <MyComponent ref={N/A} />

Answer 3

Is this to say that we shouldn't be using refs anymore in React? No, you can still use ref with functional component.

What is the pattern for accessing the native DOM elements properly in functional react components if not refs? Forwarding refs .