我有一个显示一些数据的列表项我想要做的是如果数组长度大于 10 我想获得 subzonemenus.ItemList 的前 10 个元素然后映射 if 并在 li 的末尾再添加一个 1 li 元素，因此总 li 元素将为 11 . 但如果 subzonemenus.ItemList 数组长度不大于 10 则返回它有多少 li 并且不会添加最后一个 li 。我希望我很清楚
<div className="row">
{megamenu != null && megamenu.list.map((subzonemenus, idx) => (
<div className="col" key={idx}>
<Link to={`${process.env.PUBLIC_URL}/abcde`} className="nolink">{subzonemenus.Title}</Link>
<ul className="submenu">
{
subzonemenus.ItemList.lenght > 10 ?
//get first 10 element of subzonemenus.ItemList then map it so if length > 10 will show only first 10 element of array
subzonemenus.ItemList != null && subzonemenus.ItemList.map((menuItemlist, idx) => (
<li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
))
// if length greater than 10 then will add end of li this li to "show all"
<li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.ShowAll}</Link></li>
// else length is not greater than 10 then last li will not be added
:
subzonemenus.ItemList != null && subzonemenus.ItemList.map((menuItemlist, idx) => (
<li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
))
}
</ul>
</div>
))}
</div>
请检查这个，我试图根据我的理解来回答这个问题。看起来您的代码需要一些修改。就像您不需要显式检查一样!= null，因为如果变量为空，它将评估为 false 并且 and 操作将返回 false 而不会进一步移动。
我已将与 li 相关的逻辑移至新方法 renderItems
您可以对数组进行切片（0,10）以获得前 10 个元素，对于较少的元素，它将返回所有元素。
然后是“全部显示”的三元组，如果长度大于 10，则显示全部将被添加，否则不添加任何内容。
const renderItems = (itemList) => {
let list = itemList.slice(0,10).map((menuItemlist, idx) => (
<li key={idx}><Link to={menuItemlist.Path}>{menuItemlist.MenuItemText}</Link></li>
)) ;
if(itemList.length > 10)
list.push(<li key={10}><Link to={itemList[10].Path}>{itemList[10].ShowAll}</Link></li>);
return list;
}
{megamenu && megamenu.list
&& megamenu.list.map((subzonemenus, idx) => (
<div className="col" key={idx}>
<Link to={`${process.env.PUBLIC_URL}/abcde`} className="nolink">{subzonemenus.Title}</Link>
<ul className="submenu">
{
subzonemenus.ItemList && renderItems(subzonemenus.ItemList);
}
</ul>
</div>
))}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句