map
para generar dinámicamente una serie de elementos basados en la entrada del usuario. Sin embargo, faltaba una pieza importante en ese ejemplo. Cuando crea una matriz de elementos, cada uno necesita un atributo de key
establecido en un valor único. React utiliza estas teclas para realizar un seguimiento de los elementos que se agregan, cambian o eliminan. Esto ayuda a hacer que el proceso de representación sea más eficiente cuando la lista se modifica de alguna manera. Tenga en cuenta que las claves solo tienen que ser únicas entre elementos hermanos, no tienen que ser únicas a nivel mundial en su aplicación. Frameworks()
. Frameworks()
necesita asignar la matriz a una lista desordenada, como en el último desafío. Termine de escribir la devolución de llamada del map
para devolver un elemento li
para cada marco en la matriz frontEndFrameworks
. Esta vez, asegúrese de dar a cada li
un atributo key
, establecido en un valor único. Normalmente, desea que la clave sea algo que identifique de forma única el elemento que se está representando. Como último recurso, se puede usar el índice de matriz, pero normalmente debe intentar usar una identificación única. Frameworks
debería existir y renderizarse a la página.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("Frameworks").length === 1, "The Frameworks
component should exist and render to the page.");'
- text: Frameworks
deberían representar un elemento h1
.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("h1").length === 1, "Frameworks
should render an h1
element.");'
- text: Frameworks
deberían representar un elemento ul
.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").length === 1, "Frameworks
should render a ul
element.");'
- text: La etiqueta ul
debe mostrar 6 elementos li
secundarios.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find("ul").childAt(0).name() === "li" && Enzyme.mount(React.createElement(Frameworks)).find("li").length === 6, "The ul
tag should render 6 child li
elements.");'
- text: Cada elemento del elemento de la lista debe tener un atributo de key
único.
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find("ul"); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), "Each list item element should have a unique key
attribute.");'
```