Estoy leyendo el camino del libro para reaccionar.
Una función List (componente de reacción) devuelve este elemento:
<Item key = {item.objectID} item = {item}/> Item es nuevamente otro componente de reacción, que se define como
function Item(props){ const keys = Object.keys(props); console.log("properties of Item Element:" + keys) return( <li> <span> <a href={props.item.url}>{props.item.title}:</a> </span> <span style={authorStyle}> {props.item.author},</span> <span> {props.item.num_comments},</span> <span> {props.item.points}.</span> </li> ) }; Lo más extraño para mí es que esperaría que los props tuvieran dos propiedades: key y item . Sin embargo, la consola solo muestra:
propiedades del artículo Elemento: artículo
¿Por qué es esto?
Editar: cuando hago console.log ("props:" + props), obtengo
accesorios:[objeto Objeto]
No es que ese elemento HTML tenga una sola clave. Los Item o props no son elementos HTML. Creo que su pregunta es qué sucede con el accesorio key y por qué no se puede acceder a este accesorio en su componente Item .
Si bien la mayoría de los accesorios en un elemento JSX se pasan al componente, hay dos accesorios especiales ( ref y key ) que React usa y no se reenvían a los componentes.
En su caso, props.key no está undefined . Piense en key s como algo que no debe usar. Es para React en sí mismo ayudar a identificar qué elementos han cambiado, se agregaron o eliminaron. No se pasan a sus componentes.
Si también desea usar item.objectID , deberá pasarlo explícitamente como accesorio con un nombre diferente.