Question

我想根据条件打印列表如果我有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>

Answer 1

您不能将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

Answer 2

您可以使用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'));

Fiddle

在render（）函数中返回元素时出现Gettign错误React + redux

2 个答案: