I want to use a ref for my elements, but I get an error and I don't know how to fix it.
Type '{ ref: RefObject<unknown>; letter: string; draggable: number; }' is not assignable to type 'IntrinsicAttributes & content'.
Property 'ref' does not exist on type 'IntrinsicAttributes & content'.
I've searched online for a while, but I can't find anything helpful to my case.
Here's my code:
Content.tsx
import React, { useRef, useState } from 'react';
import { Box } from './Box';
function Content() {
const onSubmitAnswer = () => {
console.log("da");
};
const test = React.createRef();
return (
<div>
<Box {...{ letter: 'C', draggable: 1 }} ref={test}/>
<Box {...{ letter: 'A', draggable: 0 }} />
<Box {...{ letter: 'B', draggable: 0 }} />
<Box {...{ letter: 'C', draggable: 0 }} />
<Box {...{ letter: 'D', draggable: 0 }} />
<button onClick={onSubmitAnswer}>Trimite!</button>
</div>
);
}
export default Content;
and Box.tsx
import React from 'react';
import './Box.css';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
export type content = {
letter: string,
draggable: number
}
export function Box(props: content) {
const el = React.createRef();
if(props.draggable) {
return (
<Draggable>
<div className="box box-drag">
<span className="box-content">
{props.letter}
</span>
</div>
</Draggable>
);
}
return (
<div className="box">
<span className="box-content" ref={el => {console.log(el?.getBoundingClientRect());}}>
{props.letter}
</span>
</div>
);
}
I think I know why this happens - Box is a component, and when I pass ref as an attribute (like I would do with a JSX tag) it doesn't behave the same (it goes in the props).
Is there any way to use ref/className/name on a component just as I'd use them on a JSX element?
//edit: typescript playground link:
https://www.typescriptlang.org/play?ssl=1&ssc=1&pln=1&pc=7#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzksgGbZFIDKMKMScAvnKVBCHAORSoacDcAKFCRYXAHQB6AEIQAHuLSFCA4eGjwAIlBQBzXSgBGAGyTY82vQZNJNdFNkv6jpgKIA3JADt4zVuy4edBgAWgATHWcbVUEYAE8wBjQIH294AF5cQTgcuFMYeigALjhCGChgL11MbNyIqxckEq98EEMkKEFGQUFSfC8MYBS4WTkACjA2MEIS5NSfAEos3LhgUgmpwnF6qNMlnFqVnJ4YfCgvODHDo5WAHidrUwA a5uc27Dgdzg0YxRlAByKBASHSACJDPI4JC5OFImCXm8kXBboQwCgLr9-oQgSDwTCQnN6D4Ea9kSscJMINNxPlCt1yTdbpI0RjEYz3pJPu52eTmQ9GrzkQshCsGbkTmcLlckR8vj8-oDgaCIfJSRzUejMYqccr8fJCSliTB1RzcFSaXSOuK SytUKmVyvg7ciKuj0 gMYEMLgBhI1pMb7a5zMpwFJUfCGEDAGAAQS8hAA7h04Jkg2mnss3qGIKZaRBdGMwWEUGC3WKhCGUmH6GHMshgoogvQyLcMXEnkHRblrpLzpcye9uS6maNcOJJ3grcUuL7ONgdo8mnAAIxMZg8UjpHB1mDMSSjo63cc4SfiadIAodEqcOMLuBLxolAAMG7gh6Hx9P58v19nnDSA T42K 76fhqP5TnkV6FLe86LpEy5gYwB5HncUEXjB-63powFIc cBvqhH7obktyGPgBTDCkvrGMAaAANY7hGUYxvGiYplAjBPAAKhU7FIAAhMylHUV4R7MiO1xut0ghIHIojwGESCkCg DGPA-rzDA-BAA
CodePudding user response:
If you want to use ref
, you should wrap Box
into forwardRef
:
import React, { useRef, useState } from 'react';
import './Box.css';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
type content = {
letter: string,
draggable: number
}
const Box = React.forwardRef<HTMLDivElement, content>((props, ref) => {
if (props.draggable) {
return (
<Draggable>
<div className="box box-drag">
<span className="box-content">
{props.letter}
</span>
</div>
</Draggable>
);
}
return (
<div className="box">
<span className="box-content">
{props.letter}
</span>
</div>
);
});
function Content() {
const onSubmitAnswer = () => {
console.log("da");
};
const test = React.createRef<HTMLDivElement>();
return (
<div>
<Box {...{ letter: 'C', draggable: 1 }} ref={test} />
<Box {...{ letter: 'A', draggable: 0 }} />
<Box {...{ letter: 'B', draggable: 0 }} />
<Box {...{ letter: 'C', draggable: 0 }} />
<Box {...{ letter: 'D', draggable: 0 }} />
<button onClick={onSubmitAnswer}>Trimite!</button>
</div>
);
}
export default Content;
ref
expects to be HTML element. Thats why I have provided HTMLDivElement
for const test = React.createRef<HTMLDivElement>();
. It is up to you which HTML element it should be.
Box
is wrapped into forwardRef
with explicit generic arguments: React.forwardRef<HTMLDivElement, content>