const RoundedIcon = ({ name, size, color, backgroundColor, }: RoundedIconProps) => { return ( <Box height={size} width={size} justifyContent="center" alignItems="center" style={{ borderRadius: size / 2 }} {...{ backgroundColor }} /> ); };Entiendo cómo usar el operador de propagación y cómo puede distribuir fácilmente el resto de los accesorios adicionales a un niño React, pero ¿alguien puede explicarme por qué esta persona está agregando llaves extra a un accesorio 'backgroundColor' ya destruido del componente RoundedIcon? ?
En mi opinión, no tiene sentido. Puede ser solo un artefacto de esta persona haciendo:
{...{ backgroundColor, name, color }}y luego ya no necesita nombre o color para ser esparcido en los accesorios. así que dejando
{...{ backgroundColor }}Porque es exactamente lo mismo que:
backgroundColor={backgroundColor}Después de escribir esto, me di cuenta de que puede ser más rápido de escribir, por lo que no tiene un 'backgroundColor' dos veces desordenado en su código.
En su caso anterior, la difusión de {...{ backgroundColor }} pasará backgroundColor en accesorios al componente secundario. Pero si desea cambiar el nombre de la variable, debe distribuirla como se muestra a continuación:
function ComponentA() { const backgroundColor = "red"; return ( <div> <p>Component A</p> <ComponentB {...{ helloWorld: backgroundColor }} /> </div> ); } function ComponentB(props) { console.log(props); // { helloWorld: "red" } return <div>Component B</div>; }Dudo que haya alguna razón por la que este {...{ backgroundColor }} sea mejor que backgroundColor={backgroundColor}