javascript – 使用React动态隐藏内容

2019年7月28日 135次阅读

我想在不相关时动态隐藏项目.

这应该仅适用于“taglevel”高于1的标签.

例如,如果我点击“书籍”,它应该只显示“冒险”和“经典”.它将隐藏标签“重磅炸弹”,因为没有“书”属于“重磅炸弹”.

这个截图应该更清楚：
《javascript – 使用React动态隐藏内容》

我以为我可以通过映射布尔值来做到这一点.您只需传递要显示的类别列表,而不是传递关卡和所有类别,然后在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>
    );
  }
});

EG的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

我们的想法是每次点击标签时都会生成新的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;
        });
    }))

它不干净,但我已经使用过滤器和一些功能跟随你的模式

点赞