En este tutorial de reacción , el autor usa un fragmento de código, comenzando en la línea 61:
const List = (props) => ( <ul> {props.list.map((item) => ( <Item key={item.objectID} item={item} /> ))} </ul> ); Esta función se llama desde const, App, <List list={stories} /> en la línea 35. Y, por último, stories es un objeto:
const stories = [ { title: 'React', url: 'https://reactjs.org/', author: 'Jordan Walke', num_comments: 3, points: 4, objectID: 0, }, { title: 'Redux', url: 'https://redux.js.org/', author: 'Dan Abramov, Andrew Clark', num_comments: 2, points: 5, objectID: 1, }, ]; Estoy confundido con respecto a la línea 61, específicamente el código props.list.map . Desde el objeto, historias, no hay atributo de lista. Sin embargo, en la línea 35, <List list={stories} /> parece implicar que la clave list hará referencia a las historias.
Mis preguntas son:
La propiedad se llama list , pero el valor de esa propiedad está siendo llenado por las stories const. La razón por la que podría hacer eso es hacer que su componente List sea genérico y flexible.
Si quisiera reutilizar List para algún otro propósito, pero tuviera que pasarle un accesorio llamado stories cuando en realidad estaba pasando clases o algún otro tipo de lista, sería confuso.
En su caso, solo comprenda que props.list es en realidad stories aquí.
Dado cualquier <Component prop={value} /> , accede al value con prop :
function Component(props) { props.prop; // get value :O }Mucha gente usa la desestructuración porque es más fácil de leer:
function Component({ prop }) { prop; // get value too :O }Y también si tiene un objeto de accesorios para un componente, puede distribuirlos:
const theProps = { prop: 42 }; return <Component {...theProps} /> // same as <Component prop={theProps.prop} />Además, no tienes que desestructurar cada accesorio, puedes juntar el resto en un objeto para usarlo normalmente:
function Component({ importantProp, ...notAsImportant }) { importantProp; // easy access and to use notAsImportant.prop; // you can still get the other props normally }