Hola, tengo el componente estándar actual que se asigna a una lista.
return ( <div className={classNames("vertical-list-rows", className)}> {list.listItemCollection.map((item, index) => ( <StandardComponnet key={`${item.key}-${index}`} list={list} item={item} /> ))} </div> );Sin embargo, me pregunto si es posible realizar otro mapa, si una condición es verdadera, para "agregar" un mapa adicional a esta lógica:
const getFilteredList = (list: ListModel, references: Array<number>) => { const filteredList = list.clone(); filteredList.listItemCollection = new ListItemCollection(); filteredList.listItemCollection.collection = list.listItemCollection.filter( (listitem) => references.includes(listitem.id) ); return filteredList; }; return ( <div className={classNames("vertical-list-rows", className)}> {list.grouping.groups.map((group) => { const filteredList = getFilteredList(list, group.reference); <StandardComponnet key={`${item.key}-${index}`} list={list} item={item} />; })} </div> );Entonces, el primer fragmento es el comportamiento estándar del componente, pero si una condición es verdadera, también me gustaría mapear el segundo fragmento, ¿es esto posible?
Utilice el operador ternario y devuelva un mapa de matriz o un valor nulo.
function List() { const arr = ['a', 'b', 'c'] return ( <div> { arr.map(val => { return ( <div> {val} { val==='a' ? [1,2,3].map(num => { return <div>{num}</div> }) : null } </div> ) } } </div> ) }Para mí, a menudo uso este estilo de código:
<View> {[ ...list1, ...(<condition> ? list2 : []), ...(<condition> ? list3 : []), ].map(item => ( /* render what you need */ ))} </View>