Question

我尝试使用React进行基本过滤。我的所有＆＃34;标签＆＃34;有＆＃34; taglevel＆＃34;。

我希望第一行用＆＃34; taglevel＆＃34;显示所有tag.name 1.
我希望第二行显示所有tag.name和＆＃34; taglevel＆＃34; 2个或更多。

但是，我无法在＆＃34;嵌套＆＃34;上过滤它。我的json中的内容。

我可以获得＆＃34;头衔＆＃34; in和filtering，但我想过滤嵌套的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

简单的反应过滤

1 个答案: