¿Cómo puedo empujar ref prop al componente secundario? me sale un error:
'{ reference: RefObject<HTMLSelectElement>; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'reference' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.Sé que se trata de React.FC<> y la función genérica, pero no tengo idea de qué tipo es, qué debo escribir entre <> para trabajar con referencias enviadas desde otro componente.
* EDITAR: sé que puedo usar forwardRef pero el punto de esta pregunta es cómo puedo pasar ref usando accesorios.
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> ) }niño:
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 SelectTypeSimplemente necesita definir los tipos de accesorios para su componente SelectType .
const SelectType: React.FC<{ refProp: React.RefObject<HTMLSelectElement> }> = (props) => { ...Para pasar una ref a un componente secundario, se podría usar la técnica llamada Referencias de reenvío que ayudaría en este escenario, consulte la documentación:
El reenvío de referencias es una técnica para pasar automáticamente una referencia a través de un componente a uno de sus hijos.
Cambiar de reference a ref para pasar typeRef como:
<SelectType ref={typeRef} /> Luego, finalmente dentro del <SelectType /> usando forwardRef como:
const SelectType = React.forwardRef((_, ref) => { return ( <Select ref={ref}> <option>Breakfast</option> <option>Lunch</option> <option>Dinner</option> <option>Supper</option> </Select> ) }) De esta manera, no necesita agregar ningún tipo de props .