Getting Property 'ref' does not exist on type 'IntrinsicAttributes' error-CodePudding

I'm implementing a link in React and TypesSript that, after clicking, scrolls to the right component, I'm using useRef Hook.

But when I do that, the error occurs:

Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'ref' does not exist on type 'IntrinsicAttributes'.

Below is the code, what am I doing wrong? I've tried several ways.

  import NewComponent from '../NewComponent';

  const titleRef = useRef<null | HTMLDivElement>(null);

  const handleBackClick = (): any => {
    titleRef!.current!.scrollIntoView({ behavior: 'smooth' });
  };

return (
  <Container>
    <Link onClick={handleBackClick}>
      Button Text
    </Link>
     ...
     ...
     ...
     <SomeComponents />
     ...
     ...
     ...
     ...

   <NewComponent ref={titleRef} />
  </Container>
)

The NewComponent is a simple component, like:

const NewComponent = () => {
  
    return (
      <Container>
        // Its a simple component
      </Container>
    );
  };
  
  export default NewComponent;

Thanks to anyone who can help me with this!

CodePudding user response：

You would wanna use forwardRef to tell TypeScript that NewComponent can accept a ref that will hold a div element. Here is how you would do it as an example:

import { forwardRef } from "react";
const NewComponent = forwardRef<HTMLDivElement>((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

import { useRef } from "react";
export default function App() {
  const titleRef = useRef<HTMLDivElement>(null);
  return (
    <div>
      <NewComponent ref={titleRef} />
    </div>
  );
}

I created this CodeSandbox if you wanna play with it. Also notice I change useRef<null | HTMLDivElement>(null) to useRef<HTMLDivElement>(null).

CodePudding user response：

In React, ref can only attach to DOM, if you want to pass it to your react component, you should use forwardRef

you can find more detail here https://reactjs.org/docs/react-api.html#reactforwardref