我有数组列表，我想渲染它。反应+还原

Question

我有下面的数组，如果曲目是特色，那么我想在 "Feature" 标题下打印它，如果曲目不是特色，那么我想在 "Other" 标题下打印它。
如果没有特色曲目或非特色曲目，则标题不应该出现。

 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>

下面是我在 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

这是打印正确的输出，但如果特色曲目不存在，它仍然呈现 header

   <li>Feature<li>

如何在上面添加条件？如果我以下面的方式编写代码，那么 returning 语法错误接近

 <li>

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

Answer 1

您可以在渲染前检查数据长度<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>
}

Answer 2

使用两个不同的列表项数组，一个用于特色，另一个用于非特色，在呈现特色之前 header 检查第一个数组的长度是否 > 0，并对非特色做类似的事情像这样：

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>

Answer 3

试试这个：

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;

我有数组列表，我想渲染它。反应+还原

I have list of array and i want to render it . React+redux

javascript

lodash

reactjs

react-redux