Tengo un diseño dinámico dentro de una vista de React Native, que cambia según los datos proporcionados para el conjunto de datos en particular. Es decir, podría haber una lista de Guía, Inventario o Observación proporcionada que deba mostrarse, pero puede haber una combinación de una, dos o 3 de estas cosas proporcionadas dentro de cualquier conjunto de datos.
Necesito proporcionar estilos condicionales/objetos de visualización en toda la vista en función del estado de cada tipo de datos proporcionado.
Actualmente tengo una serie de comprobaciones que devuelven verdadero si el estado está poblado, es decir:
const hasSiteGuide = () => { if (!this.isEmpty(this.state.locationSiteGuidePdf)) { return true; } };Luego tengo una serie de funciones que determinan cuántos artículos se suministran y brindan el estilo relevante; aquí están las comprobaciones lógicas:
const layout_full = () => { if (hasSiteGuide() && hasInventoryItems() && hasObservations()) { return true; } }; const layout_one = () => { if (!hasSiteGuide() && !hasInventoryItems() && !hasObservations()) { return true; } }; const layout_two = () => { if (!hasSiteGuide() || !hasInventoryItems() !hasObservations()) { if (hasSiteGuide() || hasInventoryItems()) { return true; } } };las comprobaciones se utilizan para mostrar estilos condicionales en varias áreas, por ejemplo:
<View style={[ layout_full() && RP_Styles.btnWrap, layout_three() && RP_Styles.btnWrap_three, layout_two() && RP_Styles.btnWrap_two, layout_one() && RP_Styles.btnWrap_one, ]}>Mi pregunta es: estoy seguro de que hay una mejor manera de hacer esto ... particularmente porque estoy a punto de implementar una cuarta posibilidad: me preguntaba si hay una manera en que podría usar solo una función para contar cuántos las declaraciones verdaderas están en una lista y devuelven la condición relevante
es decir:
returnTrueCount(hasSiteGuide(), hasInventoryItems(), hasObservations()). - ¿es posible? ¿O alguien tiene una idea para un mejor enfoque, por favor? Muchas gracias
Si desea hacer algo como esto: returnTrueCount(hasSiteGuide(), hasInventoryItems(), hasObservations()) entonces creo que la siguiente solución funcionaría.
const a = () => true; const b = () => true; const c = () => false; const d = () => true; function returnTrueCount(...funcs) { return funcs.reduce((a, f) => a + +f(), 0); } console.log(returnTrueCount(a, b, c, d));Esto funcionó para mí:
const returnTrueCount = (array, value) => { return array.filter((v) => v === value).length; };llamado con una matriz básica y el valor a verificar.