javascript - 将值列表作为可过滤内容传递

Question

我正在尝试使用 React 的值列表进行过滤。

我所有的“标签”都有一个“标签级别”来表明它们的相关性。

我希望它“取消”相同的标签(即，如果标签相同，则不要重复标签)。

• 我希望第一行显示“taglevel”为 1 的所有 tag.name。

• 我希望第二行显示“taglevel”为 2 或更多的所有 tag.name。

我无法显示和过滤值“标签”。可能是在我的代码笔的第 145 行附近我犯了错误。

这是我想要实现的目标:

我已经把它放在一个 codepen 里了。

http://codepen.io/yarnball/pen/GqbyWr?editors=1010

没有成功，我现在尝试了以下方法:

我尝试使用以下方法进行过滤:

var LevelFilter = React.createClass({
    render: function(){
        if (!this.props.tags) return null;
        return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
    }
});

然后尝试在我的返回中获取它:

    render: function(){
        ...
        var getUniqueCategories=[];
                PHOTODATA.forEach(function(el){
        if(getUniqueCategories.indexOf(el.tag) === -1 ) getUniqueCategories.push(el.tag);
    })

return (
            <div className="overlay-photogallery">
                <div className="filter-panel"><b>Tags with taglevel 1 only to be displayed</b>
                    {
                        getUniqueCategories.map(function(el,i){
                            var boundClick = titleToSelect.bind(null,el);
                            return <LevelFilter onClick={boundClick} targetLevel={1} tags={el.tag} />
                        })

                    }  
                    <a className="resetBtn" onClick={this.resetFilter}> Reset Filter </a>
                </div>

我的数据是这样的:

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

Answer 1

长话短说

您的数组操作和 React 组件存在一些严重问题。

请记住，React 提倡一种特定的自顶向下结构，您应该进一步阅读它。每个 React 组件都应该尽可能多地使用 props，理想情况下只有 1 个顶级组件应该保持状态。

---

快速前进的方法:

1. 向下传递所有数据，让每个级别的过滤器使列表独一无二。
2. 说真的，拆分你的组件，让它们尽可能依赖 props。
3. 给变量起有意义的名字。 el 没有意义，在您的情况下，指的是 PHOTODATA 数组中的 PHOTO 项目，PHOTO 中的标签，然后您使用 element 再次表示其他含义。不要说得太过火，但至少要能够确定变量应该做什么。

我做出了让步，并制作了一个结构更新很多的代码笔。该行为可能并不完全符合您的要求，但请查看代码及其组织方式以及信息如何在组件之间共享和传递。

http://codepen.io/anon/pen/AXGGLy?editors=1010

---

更新要允许多个过滤器，应更新两种方法:

selectTag: function (tag) {
    this.setState({
      displayedCategories: this.state.displayedCategories.concat([tag])
    });
}

tagFilter: function (photo) {
  return this.props.displayedCategories.length !== 0 && 
    this.props.displayedCategories.every(function(thisTag) {
      return photo.tag.some(function (photoTag) {
        return photoTag.id === thisTag.id &&
          photoTag.taglevel === thisTag.taglevel;
      });
    });
},

selectTag 现在附加到 displayedCategories 数组而不是替换它。

tagFilter 现在检查是否至少应用了一个过滤器(删除 this.props.displayedCategories.length !== 0 以禁用它)，这样它就不会“t 默认显示所有内容，然后检查每个选定的滤镜是否存在于每张照片中，从而使组件相加。

可以进行进一步的改进，例如在某个级别应用过滤器时禁用级别(每个级别一个选择)或显示应用的过滤器列表，通过按钮上的颜色或结果上方的标签列表。

(codepen 更新了这些最新的变化)

---

好的，你的 codepen 有一些问题。

首先，在第 137 行，您从对象中提取标签数组:

if(getUniqueCategories.indexOf(el.tag) === -1 ) getUniqueCategories.push(el.tag);

然后，在 146 上再次提取它:

return <LevelFilter onClick={boundClick} targetLevel={1} tags={el.tag} />

对于第 2 级:

return <LevelFilter onClick={boundClick} targetLevel={2} tags={el.tag} />

对于这两个，它应该是:

return <LevelFilter onClick={boundClick} targetLevel={n} tags={el} />

这会导致另一个问题出现，即 LevelFilter 没有返回有效的 React 组件(数组无效)。

return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);

应该是

return (
      <div>            
          {
            this.props.tags
                .filter(tag => tag.taglevel === this.props.targetLevel)
                .map(tag => <a onClick={this.props.onClick}>{tag.name}</a>)
          }
      </div>
    );

在这些变化之后，您应该更接近于您想要达到的目标。

您还需要研究其他问题，例如您的 boundClick 函数将无法正常工作，因为您只有标签列表，而不是 PHOTODATA。

不过，只是最后的想法。您可能希望将您的 React 组件分解得更多一些。

---

作为引用，这里是 codepen 中的完整代码 list :

var PHOTODATA = [{
        "title": "Into the Wild",
        "tag": [
            {
                "name": "Movie",
                "taglevel": 1,
                "id": 1
            },
            {
                "name": "Adventure",
                "taglevel": 2,
                "id": 30
            },
            {
                "name": "Book",
                "taglevel": 1,
                "id": 2
            }
        ],
        "info": []
    },{
        "title": "Karate Kid",
        "tag": [
            {
                "name": "Movie",
                "taglevel": 1,
                "id": 1
            },
            {
                "name": "Adventure",
                "taglevel": 2,
                "id": 30
            },
            {
                "name": "Kids",
                "taglevel": 3,
                "id": 4
            }
        ],
        "info": []
    },
        {
        "title": "The Alchemist",
        "tag": [
            {
                "name": "Book",
                "taglevel": 1,
                "id": 2
            },
            {
                "name": "Adventure",
                "taglevel": 2,
                "id": 30
            },
            {
                "name": "Classic",
                "taglevel": 2,
                "id": 4
            },
            {
                "name": "Words",
                "taglevel": 4,
                "id": 4
            }
        ],
        "info": []
    }];


var PhotoGallery = React.createClass({

    getInitialState: function() {
      return {
        displayedCategories: []
      };
    },

    selectTag: function (tag) {
        this.setState({
          displayedCategories: this.state.displayedCategories.concat([tag])
        });
    },

    resetFilter: function(){
      this.setState({
        displayedCategories: []
      });
    },

    render: function(){
        var uniqueCategories = PHOTODATA.map(function (photo) {
            return photo.tag; // tag is a list of tags...
        }).reduce(function (uniqueList, someTags) {
            return uniqueList.concat(
              someTags.filter(function (thisTag) {
                return !uniqueList.some(function(uniqueTag) {
                  return uniqueTag.id === thisTag.id && uniqueTag.taglevel === thisTag.taglevel
                });
              })
            );
        }, []);
        return (
            <div className="overlay-photogallery">
                <div className="filter-panel"><b>Tags with taglevel 1 only to be displayed</b>
                    <PhotoGalleryLevel level={1} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
                    <a className="resetBtn" onClick={this.resetFilter}> Reset Filter </a>
                </div>
                <div className="filter-panel"><b>Tags with taglevel 2 only to be displayed</b>
                  <PhotoGalleryLevel level={2} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
                </div>
                <div className="PhotoGallery">
                    <PhotoDisplay displayedCategories={this.state.displayedCategories} photoData={PHOTODATA} />
                </div>
            </div>
            );
    }
});

var PhotoGalleryLevel = React.createClass({
  render: function () {
    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){
          return <PhotoGalleryButton tag={tag} selectTag={this.props.selectTag} disabled={disabled} />;
        }.bind(this))}
      </div>
    );
  }
});

var PhotoGalleryButton = React.createClass({
  onClick: function (e) {
    this.props.selectTag(this.props.tag);
  },

  render: function () {
    return (
      <a className={this.props.disabled} onClick={this.onClick}>{this.props.tag.name}</a>
    );
  }
});

var PhotoDisplay = React.createClass({
  getPhotoDetails: function (photo) {
    console.log(this.props.displayedCategories, photo);
      return (
        <Photo title={photo.title} name={photo.name} tags={photo.tag} />
      );
  },

  tagFilter: function (photo) {
    return this.props.displayedCategories.length !== 0 && 
      this.props.displayedCategories.every(function(thisTag) {
        return photo.tag.some(function (photoTag) {
          return photoTag.id === thisTag.id &&
            photoTag.taglevel === thisTag.taglevel;
        });
      });
  },

  render: function () {
    return (
      <div>
        {this.props.photoData.filter(this.tagFilter).map(this.getPhotoDetails)}
      </div>
    );
  }
});

var Photo =  React.createClass({
    getTagDetail: function (tag){
      return (
        <li>{tag.name} ({tag.taglevel})</li>
      );
    },

  sortTags: function (tagA, tagB) {
    return tagA.taglevel - tagB.taglevel;
  },

    render: function(){
        return (
            <div className="photo-container" data-title={this.props.title} >
                {this.props.title}
                <ul>
                    {this.props.tags.sort(this.sortTags).map(this.getTagDetail)}
                </ul>
            </div>
        );
    }
});

ReactDOM.render(<PhotoGallery />, document.getElementById('main'));