在 render() 函数 React+redux 中返回元素时出错

Question

我想按照条件打印列表如果我有 2 套曲目 1）精选 2) 非精选

如果精选曲目可用，那么我想追加

       <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 与 if...else 或 returns 等任意语句混合使用。

而是使用三元表达式：

<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>

Answer 2

您可以使用 map() and 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() 函数 React+redux 中返回元素时出错

Gettign error while returning elements in render() function React+redux

reactjs

react-redux