javascript - 简单的 react 过滤

Question

我正在尝试在 React 中使用基本过滤。我所有的“标签”都有“标签级别”。

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

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

但是，我无法让它根据 json 中的“嵌套”内容进行过滤。

我可以获取“标题”并进行过滤，但我想过滤嵌套的 json 内容 tag.name。

我已将其放在代码笔中。

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

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

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

var LevelFilter = React.createClass({

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

然后尝试将其包含在我的返回中:

render: function(){
        var buttonClass = this.state.active ? 'active' : '';
        var titleToSelect = this.selecttitle;
        var getUniqueCategories=[];
        PHOTODATA.forEach(function(el){
            if(getUniqueCategories.indexOf(el.title) === -1 ) getUniqueCategories.push(el.title);
        })

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

                    }  

这是我的 json 示例:

    "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

可能是这样的:

var Level1filter = React.createClass({

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

var Level2filter = React.createClass({

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

现在，也许可以做得更好:

var LevelFilter = React.createClass({

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

//and use it like this
<LevelFilter onClick={onClick} targetLevel={1}/>
<LevelFilter onClick={onClick} targetLevel={2}/>

箭头函数，如果您不熟悉的话:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions