Je commence par un tableau simple d'éléments JSX:
return (
{jsxArray
.filter(jsxElement => // want to filter in JSX elements
// that are true for customAttribute keyed to `item.isActive`)
}
)
3 Réponses :
Vous ne filtrez pas la liste après votre rendu. À ce stade, il s'agit simplement d'un arbre de nœuds qui n'a plus beaucoup de sens.
à la place, vous filtrez les éléments premier em>, et puis rendu em> seuls les éléments qui réussissent Vos critères. P> const [items, setItems] = useState([])
const filteredItems = items.filter(item => item.isActive)
return <>
<p>Total Items: ${items.length}</p>
<ItemList items={filteredItems} />
</>
généralement, vous filtreriez d'abord les données simples, puis rendriez le balisage des éléments filtrés comme décrit dans @Alex Wayne Réponse.
Si vous vous inquiétez de la duplication du balisage, cela peut être résolu en extrayant un composant de Il: pour rendre la liste filtrée que vous pouvez alors faire: et pour la liste non filtrée:
au lieu d'accéder aux propriétés d'élément JSX (qui, je pense que c'est non possible ou très difficile), je vous suggère d'agir de cette façon:
Enregistrez la fonction de rendu pour les éléments dans une fonction de flèche
Enregistrez la fonction de filtrage dans une fonction de flèche
Utilisez-les pour filtrer et mapper
Utilisez-les uniquement pour cartographier
J'espère que cela vous aide!
"Il est possible que je filtre simplement la matrice à une étape antérieure" . C'est ce que vous devriez faire. "Cela entraînerait une duplication supplémentaire de code si" . Vous devriez probablement extraire un composant qui rend ce marquage.