[英]I have list of array and i want to render it . React+redux
I have below array , and if track is featured then i want to print it under "Feature" headline , and if track is non feature then i want to print it under "Other" headline. 我在array下方,如果具有跟踪功能,那么我想在“功能”标题下打印它;如果跟踪没有功能,那么我要在“其他”标题下打印它。
And if no featured track or non featured track present then heading should not come. 而且,如果没有特色曲目或无特色曲目,那么标题就不会出现。
var a = [{
isFeature:true,
name: 'abc'
},{
isFeature:false,
name: 'xyz'
},{
isFeature: false,
name: 'bpl'
}]
And on react I want to render it in below html format - 然后我想以以下html格式呈现它-
<ul>
<li>Feature</li>
<li>abc</li>
<li>xyz</li>
<li>Non Feature</li>
<li>bpl</li>
</ul>
Below is my code in render() method . 下面是我在render()方法中的代码。
races = <ul>
<li>Featured</li>
{data.map(function(f) {
if(f.isFeature) { return ( <li>{f.name}</li>)
}})}
<div>Non featured</div>
{data.map(function(f) {
if(!f.isFeature) { return ( <li>{f.name}</li>)}
})}
</ul>
}
return races
This is printing proper output but if featured track is not present , it is still rendering the header 这将打印正确的输出,但如果不存在特色轨道,则仍在渲染标题
<li>Feature<li>
How to add condition over it ? 如何在上面添加条件? If i write code in below fashion , then it is returning syntax error near
如果我以下面的方式编写代码,那么它将在附近返回语法错误
<li>
tag in return() function. return()函数中的标签。
races = <ul>
{data.map(function(f) {
if(f.isFeature) { return ( <li>Featured</li><li>{f.name}</li>)
}})}
{data.map(function(f) {
if(!f.isFeature) { return ( <li>Non featured</li><li>{f.name}</li>)}
})}
</ul>
}
return races
Try this: 尝试这个:
let featured = [<li>Featured</li>];
let nonFeatured = [<li>Non featured</li>];
data && data.forEach(function(item) {
if (item.isFeature) {
featured.push(<li>{item.name}</li>)
} else if (!item.isFeature) {
nonFeatured.push(<li>{item.name}</li>)
}
});
const races = (
<ul>
{featured.length > 1 && featured}
{nonFeatured.length > 1 && nonFeatured}
</ul>
);
return races;
You can check the data length before rendering <li>Featured</li>
您可以在呈现
<li>Featured</li>
之前检查数据长度
races = <ul>
{data.filter((item) => item.isFeature).map(function(f, index) {
if(index === 0) {
return ( <li>Featured</li><li>{f.name}</li>)
} else {
return ( <li>{f.name}</li>)
}})}
{data.filter((item) => item.isFeature === false).map(function(f, index) {
if(index === 0) {
return ( <li>Non Featured</li><li>{f.name}</li>)
} else {
return ( <li>{f.name}</li>)
}})}
</ul>
}
Use two different array of list items, one is for featured another is for not featured, and before rendering the featured header check whether 1st array has length > 0 and do similar thing for Non Featured also something like this : 使用两个不同的列表项数组,一个用于特色,另一个用于不特色,并且在渲染特色标头之前,检查1st数组的长度是否大于0并为Non Featured做类似的事情:
data.map(function(f) {
if(f.isFeature) {
featured.push( <li>{f.name}</li> )
}else{
non_featured.push ( <li>{f.name}</li> )
}
}
featured.length ? featured.unshift(<li>Featured</li>) : "";
non_featured.length ? non_featured.unshift(<li>Non-Featured</li>) : "";
race = <ul>
{featured}
{non_featured}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.