Masquer le contenu dynamiquement avec React

Question

Je souhaite masquer des éléments de façon dynamique lorsqu'ils ne sont pas pertinents.

Cela ne devrait demander des étiquettes avec un « taglevel » au-dessus 1.

Par exemple, si je clique sur « livres » il ne devrait montrer « l'aventure » et « classique ». Il cachera l'étiquette "blockbuster" car aucun "livre" n'appartient à "blockbuster".

Cette capture d'écran devrait le rendre plus clair:

Je pensais que je pouvais le faire en cartographiant booléens. Au lieu de passer un niveau et toutes les catégories, vous allez simplement passer une liste de catégories à afficher, puis donner cette liste dans PhotoGallery pour chaque niveau

Je suis ouvert à tout moyen de le faire.

J'ai mis le code dans ce codepen:

http://codepen.io/yarnball/pen/GjwxQq

Voici un échantillon où je prends le niveau tag:

var PhotoGalleryLevel = React.createClass({ 
    render: function() { 
    var getCategoriesForLevel = this.props.displayedCategories.some(function (tag) { 
     return tag.taglevel === this.props.level; 
    }.bind(this)); 

    /* Write method here that takes the level as an argument and returns the filtered list?*/ 
    /*displayedCategories={this.state.getCategoriesForLevel(1)} 
    displayedCategories={this.getCategoriesForLevel(1)} 
    */ 

    var filteredTags = this.props.tags.filter(function (tag) { 
     return tag.taglevel === this.props.level; 
    }.bind(this)); 
    var disabled = this.props.displayedCategories.some(function (tag) { 
     return tag.taglevel === this.props.level; 
    }.bind(this)); 
    return (
     <div> 
     {filteredTags.map(function (tag, index){ 
      return <PhotoGalleryButton key={index} tag={tag} selectTag={this.props.selectTag} disabled={disabled} />; 
     }.bind(this))} 
     </div> 
    ); 
    } 
}); 

EG des données JSON:

"title": "Into the Wild", 
    "tag": [ 
     { 
      "name": "Movie", 
      "taglevel": 1, 
      "id": 1 
     }, 
     { 
      "name": "Adventure", 
      "taglevel": 2, 
      "id": 30 
     }, 
     { 
      "name": "Classic", 
      "taglevel": 1, 
      "id": 2 
     } 
    ], 
    "info": [] 
} 

Answer 1

schneider ici: http://codepen.io/anon/pen/EgOqwj?editors=0010

l'idée est de générer de nouvelles uniqueCategories chaque fois que vous cliquez sur un tag:

this.setState({ 
     uniqueCategories: this.getUniqueCategories(PHOTODATA, newCategories), 
     displayedCategories: newCategories, 
    }); 

maintenant vous avez la fonction de getUniqueCategories et je l'ai ajouté ceci:

(!display.length || !displayFiltered.length || 
    displayFiltered 
    .some(function(t) { 
     return arr.filter(function(tc) { 
      return tc.taglevel === t.taglevel; 
     }) 
     .some(function(tc) { 
      return t.id === tc.id; 
     }); 
    })) 

ce ne est pas propre, mais i » ve suivi votre modèle en utilisant un filtre et certaines fonctions