我正在尝试在 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": []
}
最佳答案
可能是这样的:
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
关于javascript - 简单的 react 过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39147884/