{ }
, para tareas como acceder a accesorios, aprobar accesorios, acceder a estados, insertar comentarios en su código y, más recientemente, diseñar estilos para sus componentes. Estos son todos los casos de uso comunes para poner JavaScript en JSX, pero no son la única forma en que puede utilizar el código JavaScript en sus componentes React. También puede escribir JavaScript directamente en sus métodos de render
, antes de la declaración de return
, sin insertarlo dentro de llaves. Esto se debe a que aún no está dentro del código JSX. Cuando desee utilizar una variable más adelante en el código JSX dentro de la declaración de return
, coloque el nombre de la variable entre llaves. render
tiene una matriz que contiene 20 frases para representar las respuestas encontradas en el clásico juguete de la bola mágica de los ochenta. El evento de clic de botón está ligado al ask
método, por lo que cada vez que se hace clic en el botón de un número aleatorio se genera y se almacena como el randomIndex
en el estado. En la línea 52, borra la cadena "change me!"
y reasigne la answer
constante para que su código acceda al azar a un índice diferente de la possibleAnswers
matriz de answer
cada vez que se actualice el componente. Finalmente, inserta la answer
const dentro de las etiquetas p
. MagicEightBall
debe existir y debe MagicEightBall
en la página.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find("MagicEightBall").length, 1, "The MagicEightBall
component should exist and should render to the page.");'
- text: El primer hijo de MagicEightBall
debería ser un elemento de input
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), "input", "MagicEightBall
's first child should be an input
element.");'
- text: El tercer hijo de MagicEightBall
debería ser un elemento de button
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), "button", "MagicEightBall
's third child should be a button
element.");'
- text: El estado de MagicEightBall
debe inicializarse con una propiedad de userInput
y una propiedad de randomIndex
ambas configuradas en un valor de una cadena vacía.
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state("randomIndex") === "" && Enzyme.mount(React.createElement(MagicEightBall)).state("userInput") === "", "MagicEightBall
's state should be initialized with a property of userInput
and a property of randomIndex
both set to a value of an empty string.");'
- text: 'Cuando MagicEightBall
se monta por primera vez en el DOM, debe devolver un elemento p
vacío.'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find("p").length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find("p").text() === "", "When MagicEightBall
is first mounted to the DOM, it should return an empty p
element.");'
- text: 'Cuando se ingresa texto en el elemento de input
y se hace clic en el botón, el componente MagicEightBall
debería devolver un elemento p
que contenga un elemento aleatorio de la possibleAnswers
matriz de MagicEightBall
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find("input").simulate("change", { target: { value: "test?" }}); comp.find("button").simulate("click"); }; const result = () => comp.find("p").text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, "When text is entered into the input
element and the button is clicked, the MagicEightBall
component should return a p
element that contains a random element from the possibleAnswers
array.");}'
```
{ /* change code below this line */ } { /* change code above this line */ }