React中的条件渲染js

我在渲染中添加了一个条件，并突然停止显示。这是我正在使用的代码。React中的条件渲染js

{this.state.sdata.map((sdata, i) => 
    {i < 5 && 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    } 
) 
}

我想只显示来自sdata的4个项目。有人请帮忙。

来源

2017-06-20 Prajila V P

你忘了我> = 5后从map体return元素，以及你需要return null为array所有条目。

写这样的：

{this.state.sdata.map((sdata, i) => { 
     if(i < 5) 
      return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
     return null; 
    }) 
}

但我会建议你使用for loop，而不是map创建仅5元。

如果你想使用map然后先用slice和创建5 array子元素，然后使用上map。

像这样：

{this.state.sdata.slice(0,5).map((sdata, i) => { 
    return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
})}

来源

2017-06-20 10:01:04

{this.state.sdata.map((sdata, i) => 
    (i < 4 && 
     <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    ) 
    ) 
}

只需更换{}与()像上面显示，并显示出4个数据，你必须提供小于4，因为我用0.1

来源

2017-06-20 10:08:31

你可以开始也尝试从这里有条件渲染的替代方案：https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

基本上，建议是创建一个“Co nditional”组件，并用它喜欢：

<Conditional if={this.state.something}> 
    <div>hello!</div> 
<Conditional>

所以，<div>hello!</div>将要呈现的只有this.state.something是真实的。

在你的榜样，应该以这种方式来实现：

{ 
    this.state.sdata.map((sdata, i) => 
    <Conditional if={i < 5}> 
     <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    <Conditional> 
}

不管怎么说，最好的办法，只显示5个元素是要做到：基本上，仅获得该数组中的前5种元素在该阵列中执行.map。

{ 
    this.state.sdata.slice(0, 5).map((sdata, i) => 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
}

来源

2018-02-14 00:20:36

React中的条件渲染js

回答

相关问题