4.0 KiB
4.0 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403618b | Give Sibling Elements a Unique Key Attribute | 6 | false | Dar a los elementos hermanos un atributo clave único |
Description
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. Instructions
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. Tests
tests:
- text: El componente <code>Frameworks</code> debería existir y renderizarse a la página.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("Frameworks").length === 1, "The <code>Frameworks</code> component should exist and render to the page.");'
- text: <code>Frameworks</code> deberían representar un elemento <code>h1</code> .
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("h1").length === 1, "<code>Frameworks</code> should render an <code>h1</code> element.");'
- text: <code>Frameworks</code> deberían representar un elemento <code>ul</code> .
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").length === 1, "<code>Frameworks</code> should render a <code>ul</code> element.");'
- text: La etiqueta <code>ul</code> debe mostrar 6 elementos <code>li</code> 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 <code>ul</code> tag should render 6 child <code>li</code> elements.");'
- text: Cada elemento del elemento de la lista debe tener un atributo de <code>key</code> ú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 <code>key</code> attribute.");'
Challenge Seed
const frontEndFrameworks = [
'React',
'Angular',
'Ember',
'Knockout',
'Backbone',
'Vue'
];
function Frameworks() {
const renderFrameworks = null; // change code here
return (
<div>
<h1>Popular Front End JavaScript Frameworks</h1>
<ul>
{renderFrameworks}
</ul>
</div>
);
};
After Test
console.info('after the test');
Solution
// solution required