javascript - 使用 React 动态隐藏内容

Question

我想动态隐藏不相关的项目。

这应该只适用于“taglevel”大于 1 的标签。

例如，如果我点击“书籍”，它应该只显示“冒险”和“经典”。它将隐藏标签“blockbuster”，因为没有“books”属于“blockbuster”。

这个截图应该更清楚:

我想我可以通过映射 bool 值来做到这一点。您只需传递要显示的类别列表，而不是传递级别和所有类别，然后在 PhotoGallery 中为每个级别提供该列表

我愿意接受任何方式。

我已经把代码放在这个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

这里是施耐德: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;
        });
    }))

它不干净，但我已经按照你的模式使用过滤器和一些功能