if/else
en JavaScript. No son tan robustos como las declaraciones tradicionales if/else
, pero son muy populares entre los desarrolladores de React. Una razón para esto se debe a cómo se compila JSX, if/else
sentencias no se pueden insertar directamente en el código JSX. Es posible que haya notado esto hace un par de desafíos: cuando se requería una declaración if/else
, siempre estaba fuera de la declaración de return
. Las expresiones ternarias pueden ser una excelente alternativa si desea implementar lógica condicional dentro de su JSX. Recuerde que un operador ternario tiene tres partes, pero puede combinar varias expresiones ternarias juntas. Aquí está la sintaxis básica: condición? expressionIfTrue: expressionIfFalse
CheckUserAge
render()
del componente CheckUserAge
. Se denominan buttonOne
, buttonTwo
y buttonThree
. A cada uno de estos se les asigna una expresión JSX simple que representa un elemento de botón. Primero, inicialice el estado de CheckUserAge
con input
y userAge
ambos configurados en valores de una cadena vacía. Una vez que el componente está brindando información a la página, los usuarios deben tener una forma de interactuar con él. Dentro de la declaración de return
del componente, configure una expresión ternaria que implemente la siguiente lógica: cuando la página se carga por primera vez, renderice el botón de envío, buttonOne
, a la página. Luego, cuando un usuario ingresa su edad y hace clic en el botón, renderiza un botón diferente según la edad. Si un usuario ingresa un número menor que 18
, render buttonThree
. Si un usuario ingresa un número mayor o igual a 18
, renderice el buttonTwo
. CheckUserAge
debe procesarse con un solo elemento de input
y un solo elemento de button
.
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The CheckUserAge
component should render with a single input
element and a single button
element.");'
- text: 'El CheckUserAge
componente CheckUserAge
debe inicializarse con una propiedad de userAge
y una propiedad de input
, ambas configuradas con el valor de una cadena vacía.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The CheckUserAge
component's state should be initialized with a property of userAge
and a property of input
, both set to a value of an empty string.");'
- text: 'Cuando el componente CheckUserAge
se procesa por primera vez en el DOM, el texto interno del button
debe ser Enviar.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the CheckUserAge
component is first rendered to the DOM, the button
's inner text should be Submit.");'
- text: 'Cuando se introduce un número inferior a 18 a la input
elemento y el button
se hace clic en el button
's texto interno debe leer You Shall Not Pass
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You Shall Not Pass
."); }; '
- text: 'Cuando se introduce un número mayor o igual a 18 a la input
elemento y el button
se hace clic en el button
's texto interno debe leer You May Enter
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You May Enter
."); }; '
- text: 'Una vez que se ha enviado un número, y el valor de la input
se cambia una vez más, el button
debería volver a leer Submit
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the input
is once again changed, the button
should return to reading Submit
."); }; '
- text: Su código no debe contener ninguna declaración if/else
.
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any if/else
statements.");'
```