Блог

Я хочу динамически скрывать элементы, когда они не имеют значения.

Это должно применяться только к тегам с «уровнем тегов» выше 1.

Например, если я нажму «книги», в нем должны отображаться только «приключения» и «классика». Это скроет тег «blockbuster», поскольку никакие «книги» не принадлежат «blockbuster».

Этот снимок экрана должен сделать его более понятным:

Я думал, что смогу сделать это, сопоставив логические значения. Вместо передачи уровня и всех категорий вы просто передадите список категорий для отображения, а затем предоставите этот список в фотогалерее для каждого уровня

Я открыт для любого способа сделать это.

Я поместил код в этот 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:

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

шнайдер здесь:http://codepen.io/anon/pen/EgOqwj?editors=0010

идея состоит в том, чтобы генерировать новые уникальные категории каждый раз, когда вы нажимаете на тег:

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

это не чисто, но я следовал вашему шаблону, используя фильтр и некоторые функции