else if
instrucciones, else if
declaraciones devuelven interfaces de usuario ligeramente diferentes, puede repetir el código que deja espacio para el error. En su lugar, puede utilizar el operador lógico &&
para realizar la lógica condicional de una manera más concisa. Esto es posible porque desea verificar si una condición es true
y, si lo es, devolver algún margen de beneficio. Aquí hay un ejemplo: {condition && <p>markup</p>}
Si la condition
es true
, se devolverá la marca. Si la condición es false
, la operación devolverá inmediatamente false
después de evaluar la condition
y no devolverá nada. Puede incluir estas declaraciones directamente en su JSX y encadenar varias condiciones juntas escribiendo &&
después de cada una. Esto le permite manejar una lógica condicional más compleja en su método render()
sin repetir mucho código. h1
solo display
si la display
es true
, pero use el operador lógico &&
lugar de una instrucción if/else
. MyComponent
debería existir y renderizarse.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length; })(), "MyComponent
should exist and render.");'
- text: 'Cuando la display
se configura como true
, se debe display
un div
, un button
y h1
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 2 && updated.find("button").length === 1 && updated.find("h1").length === 1, "When display
is set to true
, a div
, button
, and h1
should render."); }; '
- text: 'Cuando la display
está configurada en false
, solo button
debe display
un button
div
y.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 1 && updated.find("button").length === 1 && updated.find("h1").length === 0, "When display
is set to false
, only a div
and button
should render."); }; '
- text: El método de representación debe utilizar el operador lógico && para verificar la condición de this.state.display.
testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'
```