我想根据条件打印列表 如果我有2套曲目 1)特色 2)nonFeatured
如果有特色曲目可用,那么我想追加
<li>Featured Track</li>
在功能曲目列表之前。
如果非特色曲目可用的话
<li> Other tracks</li>
列表前的
所以输出将是 -
<ul>
<li>Featured Track</li>
<li>1</li>
<li>2</li>
<li>Other tracks</li>
<li>1</li>
</ul>
以下是我的代码段。
render() {
// Feature tracks and tracks are sorted track lists from currentTracks array. CurrentTracks contains both types.
let {featureTracks, tracks, currentTracks} = this.props.currentTracks
let errorMessage = currentTracks.error
let races = null
if(_.isArray(currentTracks.tracks) && !_.isEmpty(currentTracks.tracks)) {
races = (
<ul className="currentRacesDropdownList animated">
//Code to return feature track
if(_.isArray(featureTracks) && !_.isEmpty(featureTracks)) {
return (
<li className="dropDownHeading ttFont fontRed">
Featured Tracks (5)
</li>
{ featureTracks.map((track, key) => <RaceLineItem key={key} track={track} /> )}
)
}
if(_.isArray(tracks) && !_.isEmpty(tracks)) {
//Code to return other track
return (
<li className="dropDownHeading ttFont fontRed">
All Other Tracks (5)
</li>
{ tracks.map((track, key) => <RaceLineItem key={key} track={track} /> )}
)
}
</ul>
)
}
return (
<div>
{races}
{errorMessage}
</div>
)
}
但是我在if()
之后的return语句中遇到错误以其他方式提出同样的问题,请看下面的例子。
I have below array , and if track is feature then i want to print it under "Feature" headline , and if track is non feature then i want to print it under "Other" headline.
var a = [{
isFeature:true,
name: 'abc'
},{
isFeature:false,
name: 'xyz'
},{
isFeature: false,
name: 'bpl'
}]
反应一下,我想以html格式呈现它 -
<ul>
<li>Feature</li>
<li>abc</li>
<li>xyz</li>
<li>Non Feature</li>
<li>bpl</li>
</ul>
答案 0 :(得分:0)
您不能将JSX与return
或<ul className="currentRacesDropdownList animated">
{(_.isArray(featureTracks) && !_.isEmpty(featureTracks)) ?
<span>
<li className="dropDownHeading ttFont fontRed">
Featured Tracks (5)
</li>
{ featureTracks.map((track, key) => <RaceLineItem key={key} track={track} /> )}
</span>
: null}
...
</ul>
等任意语句混合使用。
相反,使用三元表达式:
contact
答案 1 :(得分:0)
您可以使用map()和filter()方法以更清洁的方式执行此操作。你可以尝试这样的事情:
let a = [{
isFeature:true,
name: 'abc'
},{
isFeature:false,
name: 'xyz '
},{
isFeature: false,
name: 'bpl'
}]
class Test extends React.Component {
render() {
let data = this.props.data;
let races = null;
if(data.length > 0){
races = <div>
<div>Featured</div>
{data.map(item => item).filter(f => f.isFeature)}
<div>Non featured</div>
{data.map(item => item).filter(f => !f.isFeature)}
</div>
}
return races
}
}
React.render(<Test data={a}/>, document.getElementById('container'));
这是fiddle。
<强>更新强>
现在只有存在结果才会显示结果。
let a = [{
isFeature:true,
name: 'abc'
},{
isFeature:false,
name: 'xyz '
},{
isFeature: false,
name: 'bpl'
}]
class Test extends React.Component {
render() {
let data = this.props.data;
let races = null;
if(data.length > 0){
let featured = data.map(item => item).filter(f => f.isFeature).length > 0 ? <div><div>Featured</div>{data.map(item => item).filter(f => f.isFeature)}</div> : "";
let nonFeatured = data.map(item => item).filter(f => !f.isFeature).length > 0 ? <div><div>Non Featured</div>{data.map(item => item).filter(f => !f.isFeature)}</div> : "";
races = <div>
{featured}
{nonFeatured}
</div>
}
return races
}
}
React.render(<Test data={a}/>, document.getElementById('container'));