Tengo un componente de reacción que recibe una identificación de sus accesorios.
export type MyComponentProps = { id: string } export const MyComponent = function(props: MyComponentProps) { return ( <div>{props.id}</div> ); }Ahora, quiero que la identificación sea opcional, pero tengo el requisito de usar identificadores, así que hago que la identificación sea opcional y agrego un accesorio predeterminado.
import { v4 } from 'uuid'; export type MyComponentProps = { id?: string } export const MyComponent = function(props: MyComponentProps) { return ( <div>{props.id}</div> ); } MyComponent.defaultProps = { id: `MyComponent-${v4()}` }¡Hecho! Excepto que, ahora, si renderizo 2 instancias diferentes de MyComponent , tendrán la misma identificación. ¿Cómo trabajo alrededor de esto? Lo que hice es lo siguiente, pero no soy un experto en reacciones y no sé si hay otra forma de lograr esto.
import { v4 } from 'uuid'; export type MyComponentProps = { id?: string } export const MyComponent = function(props: MyComponentProps) { const id = props.id?? `MyComponent-${v4()}`; return ( <div>{id}</div> ); }Si desea una identificación por componente que permanezca igual entre renderizaciones, deberá ponerla en el estado.
export const MyComponent = function(props: MyComponentProps) { const [defaultId] = useState(v4) const id = props.id ?? defaultId return ( <div>{id}</div> ); }