No estoy seguro de si se trata de un problema de TypeScript, o si es más una pregunta sobre el comportamiento de los accesorios de React, o si simplemente soy yo quien estropea la desestructuración de ES6.
Tengo un ParentComponent cuyos accesorios son de tipo ParentProps y un ChildComponent que también tiene el mismo tipo. ChildComponent consume los mismos accesorios, excepto UN accesorio que ahora necesito redefinir (o si eso no es posible, agregar uno nuevo).
Para este ejemplo, digamos que ParentProps es solo buttonName: string y doSomething: (text: string) => void
Pensé que podría agregarle a un objeto la desestructuración extendiendo un objeto, luego agregando propiedad: valor después de una coma, es decir: {...props, additionalProp: doSomething} Pero eso no parece funcionar: Left side of comma operator is unused and has no side effects. ¿Alguien puede intervenir sobre cuál es mi problema aquí y qué estoy haciendo mal?
const ParentComponent: FC<ParentProps> = memo(function ParentComponent({ ...props }) { function doSomething(text) { console.log("did the thing", text) } return <ChildComponent {...props, doSomething: doSomething} /> // <----here's the problem }) export function ChildComponent(props: ParentProps) { return ( <button onClick={props.doSomething(props.buttonName)}>{props.buttonName}</button> ) }...o si simplemente soy yo quien estropea la desestructuración de ES6.
return <ChildComponent {...props} doSomething={doSomething} /> // do thisTienes que desestructurar un objeto (o matriz). Estaba confundiendo los corchetes de propiedad JSX con los corchetes utilizados para declarar un objeto.
El ejemplo anterior también sobrescribirá una propiedad potencialmente existente props.doSomething . React-props sobrescribirá los accesorios definidos previamente. Sin embargo, sería mejor si fuera explícito sobre este cambio en lugar de sobrescribirlo implícitamente.