Estaba viendo un video sobre componentes de diseño y vi que el autor parecía desestructurar los parámetros pero también asignarlos como una propiedad en un objeto (como se ve en Splitscreen.js). Me preguntaba si alguien podría ayudarme a entender qué está pasando y por qué eligió hacer esto. ¿Hay alguna ventaja en hacerlo?
export const Splitscreen = ({ left: Left, right: Right }) => { return ( <Container> <Pane> <Left /> </Pane> <Pane> <Right /> </Pane> </Container> ); }; const LeftHandComponent = () => { return <h1>Left</h1>; }; const RightHandComponent = () => { return <h1>Right</h1>; }; function App() { return <Splitscreen left={LeftHandComponent} right={RightHandComponent} />; } export default App;Esto no es algo especial de React. Es JavaScript básico . Los objetos generalmente se desestructuran así:
const { age } = { name: "John", age: 23 }; console.log(age);Sin embargo, ¿qué sucede si no desea usar el nombre dado en el objeto sino asignarle un nombre personalizado, aún con la desestructuración del objeto?
Recuerde en declaraciones de importación que podría hacer
import something as smt from './something'; ¿Qué pasaría si quisieras llamar a age userAge ? Puedes hacer algo similar:
const { age: userAge } = { age: 23 }; console.log(userAge);Eso es lo que está pasando. Tome una función regular:
function myFunc(obj) { console.log(obj.name); } myFunc({ name: "hello" });Podrías hacerlo:
function myFunc({ name }) { console.log(name); } myFunc({ name: "hello" });Pero si quisieras nombrarlo de otra manera, el lado derecho lo cambiaría de nombre:
function myFunc({ name: objName }) { console.log(objName); } myFunc({ name: "hello" });En su ejemplo, se cambió el nombre del parámetro a su equivalente de PascalCase porque esa es la convención de nomenclatura para los componentes de React.
Por lo general, en HTML usamos palabras en minúsculas para parámetros o atributos, y una primera letra en mayúscula para elementos. Así que esto parece normal y correcto:
<Splitscreen left=xxx right=yyy>Parecería extraño tener los parámetros con una primera letra superior como esta:
<Splitscreen Left=xxx Right=yyy> Ahora, dentro de la implementación de Splitscreen , queremos usar left y right como elementos HTML, por lo que el autor quería mantener la convención y llamarlos Left y Right cuando los usa porque esto se vería mal:
<Container> <Pane> <left /> <--- just looks odd </Pane> <Pane> <right /> <--- just looks odd </Pane> </Container> Usar la desestructuración con el cambio de nombre es una manera fácil de asignar de left a Left y de right a Right y evita tener líneas de código extra voluminosas como esta:
export const Splitscreen = ({ left, right }) => { const Left = left; const Right = right; return (...)