条件显示项目 - 基于状态的内容隐藏

Question

此页面允许通过单击标记来“过滤”内容。

但是，即使在选择上述过滤器时项目不可用时，它也会显示标签。

我希望此应用在单击标记项时“隐藏”标记（“taglevel”高于1 ）。

例如，如果我选择“书籍”，则应隐藏标签“重磅炸弹”，因为它是“taglevel”2项目，不适用于“taglevel”1本书。

我的完整代码位于此CodePen（http://codepen.io/yarnball/pen/GqbyWr?editors=1010）。

我在这里得到标签（第79行）：

selectTag: function (tag) {
        this.setState({
          displayedCategories: this.state.displayedCategories.concat([tag]),
        });
        var filteredCategories = this.state.displayedCategories
                             .filter(function (existingTag) {
        return existingTag.taglevel !== tag.taglevel ||
                existingTag.id !== tag.id;
        });
        var newCategories = filteredCategories.length === this.state.displayedCategories.length ?
        filteredCategories.concat([tag]) :
        filteredCategories;
        this.setState({
            displayedCategories: newCategories,
        });

我正在调用按钮（标签/过滤器）返回此处（第133行）：

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {
      isClicked: false
    }
  },
  onClick: function (e) {
    this.setState({
      isClicked: !this.state.isClicked
    })
    this.props.selectTag(this.props.tag);
  },
  render: function () {
    return (
      <a className={this.state.isClicked ? 'filter-panel-1' : ''} onClick={this.onClick}>{this.props.tag.name}</a>
    );
  }
});

示例数据：

        "title": "Karate Kid",
        "tag": [
            {
                "name": "Movie",
                "taglevel": 1,
                "id": 1
            },
            {
                "name": "Blockbuster",
                "taglevel": 2,
                "id": 29,
            },
            {
                "name": "Kids",
                "taglevel": 3,
                "id": 4
            }
        ],
        "info": []