javascript - 如果每 3 个包含此语句，则映射 if 语句

Question

我想在每第三个 .map 项目之后添加我想知道是否有人知道正确的方法，就好像语句不起作用，我不确定如何实现这个结果。

<Grid container spacing={3}>
    {items.map(item => (
        <MediaCard title={item.title} link={item.url} pic={item.image} category={item.category} tweet={item.TweetIDs}/>
    ))}
    <GoogleAds />
</Grid>

我尝试将 if 语句放入 MediaCard 函数中，但意识到这是错误的，因为我需要它在 items.map 运行时运行。\

Answer 1

有两种不同的方法可以实现这一目标。要获取第三个元素，请使用模 % 运算符。它返回除该数字所得的余数。

首先你可以在map函数之前使用filter函数:

{items.filter((item, index) => index % 3 === 2)
        .map(item => (
            <MediaCard />)}

或者在map中返回false，会导致不渲染。

items.map((item, index) => (
            index % 3 === 2 && <MediaCard />)}

希望这有帮助。快乐编码。