用React動態地隱藏內容

Question

我想動態地隱藏它們無關的項目。

這應該只適用於標籤上面1.

例如「taglevel」，如果我點擊「書籍」，只顯示「冒險」和「經典」。它會隱藏標籤「大片」，因爲沒有「書籍」屬於「大片」。

這張截圖應該更清楚：

我以爲我可以通過映射布爾做到這一點。而不是傳遞級別和所有的類別，你只是傳遞一個類別列表顯示，然後在每個級別的相冊中給出該列表

我願意以任何方式做到這一點。

我已經把代碼在此codepen：

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

這裏的，我拿代碼級的樣本：

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> 
    ); 
    } 
}); 

JSON數據的EG：

"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 here：http://codepen.io/anon/pen/EgOqwj?editors=0010

的想法是產生新uniqueCategories你點擊一個標籤，每次：

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

現在你有getUniqueCategories功能，我添加了這一點：

(!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; 
     }); 
    })) 

它不乾淨，但我」 ve遵循你的模式使用過濾器和一些功能