javascript - 地图函数渲染3次后如何添加不同的文本？

Question

我想在卡片渲染三次后添加一些文本。这些卡使用 split 和 map 从本地 json 文件中获取值。我还想每渲染 3 次组件就更改一次文本。

import React from 'react';
import data from '../data.json';
import { Card,Button } from 'react-bootstrap';

function Med() {
    
    return (
        <div>
                {data.slice(0,6).map((item)=>{
                    return (
                        <div>
                            <Card style={{ width: '18rem' }}>
                                <Card.Body>
                                    <Card.Title>{item.Name}</Card.Title>
                                    <Card.Text>
                                        This is the explaination of product card.
                                    </Card.Text>
                                    <Button variant="primary">Add to cart</Button>
                                </Card.Body>
                            </Card>                           
                        </div>   
                    )
                    
                })}       
        </div>
    )
}

export default Med;

这是我目前的输出。但我希望它在克里斯的卡片之后显示一些文字。

标签： javascriptreactjsjson

Answer 1

{data.slice(0,6).map((item,index)=>{//use the index to conditionally render })}

编辑#1 - 所以，在阅读了你的评论之后，这段代码可能会给你一个想法

{data.slice(0, 6).map((item, index) => {
return (
 <div>
   {index < 3 ? <h1>First three</h1> : <h1>From Fourth</h1>
 </div>
);
})}