参考 Typescript 中的道具在反应

Question

How can I push ref prop to the child component? I get an error:

'{ reference: RefObject<HTMLSelectElement>; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'reference' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

I know it is something about React.FC<> and the generic function but I have no idea what type is it, what should I write between <> to work with refs pushed from another component.

*EDIT: I know I can use forwardRef but the point of this question is how can I pass ref using props.

 const typeRef = useRef<HTMLSelectElement>(null)
    const descriptionRef = useRef<HTMLTextAreaElement>(null)

    const onSubmitHandler = (e: React.FormEvent): void => {
        e.preventDefault()
        
    }

    return (
        <React.Fragment>
            <Navbar />
            <Center width="100%" height="95vh">
                <Flex justifyContent="center" alignItems="center" width="50vw">
                    <FormControl textAlign="center" onSubmit={onSubmitHandler}>
                        <Input ref={titleRef} placeholder="Name for your recipe" />
                        <SelectType reference={typeRef} />
                        <Textarea ref={descriptionRef} placeholder="Description" cols={COLS} rows={ROWS} resize="none" />
                        <Button type="submit">Submit</Button>
                    </FormControl>
                </Flex>
            </Center>
        </React.Fragment>
        
    )
}

child:

import { Select } from "@chakra-ui/react"

const SelectType: React.FC<> = (props) => {
    return (
    <Select ref={props.refProp}>
        <option>Breakfast</option>
        <option>Lunch</option>
        <option>Dinner</option>
        <option>Supper</option>
    </Select>
    )
}

export default SelectType

Answer 1

In order to pass down a ref to a child component the technique called Forwarding Refs could be used which would help in this scenario, see from the documentation:

Ref forwarding is a technique for automatically passing a ref through a component to one of its children.

Changing from reference to ref to pass down typeRef as:

<SelectType ref={typeRef} />

Then finally within the <SelectType /> component using forwardRef as:

const SelectType = React.forwardRef((_, ref) => {
  return (
    <Select ref={ref}>
      <option>Breakfast</option>
      <option>Lunch</option>
      <option>Dinner</option>
      <option>Supper</option>
    </Select>
  )
})

In this way you don't need to add any type for props .

Answer 2

You simply need to define the prop types for your SelectType component.

const SelectType: React.FC<{ refProp: React.RefObject<HTMLSelectElement> }> = (props) => { ...

TS Playground