React中map渲染卡片时每渲染3次后添加不同自定义文本如何实现

核心思路是通过map的索引参数判断卡片位置，满足条件时插入自定义内容：

基础实现（仅在第3张Chris卡片后插入固定文本） #

直接判断当前卡片索引为2（索引从0开始，第3张对应索引2）时，插入自定义内容即可，修改后代码如下：

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, index)=>{
                    return (
                        // React列表渲染需要加唯一key，这里假设item.Name唯一，可根据实际数据替换为id等字段
                        <React.Fragment key={item.Name}>
                            <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>
                            {/* 第3张卡片渲染完成后插入自定义文本 */}
                            {index === 2 && <div className="custom-text">你要插入的自定义文本</div>}
                        </React.Fragment>
                    )
                })}       
        </div>
    )
}

export default Med;

进阶实现（每3张卡片后插入动态切换的文本） #

如果需要每3张都插入不同的可动态更新的文本，维护一个文本数组按插入顺序取值即可：

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

function Med() {
    // 动态插入的文本数组，可根据需求修改、更新
    const [insertTexts, setInsertTexts] = useState([
        '第1次插入的自定义文本（3张后）',
        '第2次插入的自定义文本（6张后）'
    ]);

    return (
        <div>
                {data.slice(0,6).map((item, index)=>{
                    // 计算当前是第几次插入，从0开始计数
                    const insertIndex = Math.floor((index + 1) / 3) - 1;
                    return (
                        <React.Fragment key={item.Name}>
                            <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>
                            {/* 每3张卡片后插入对应文本 */}
                            {(index + 1) % 3 === 0 && insertTexts[insertIndex] && (
                                <div className="custom-text">{insertTexts[insertIndex]}</div>
                            )}
                        </React.Fragment>
                    )
                })}       
        </div>
    )
}

export default Med;

需要修改插入的文本时，直接调用setInsertTexts更新数组内容即可实现动态切换。

内容的提问来源于stack exchange，提问作者red wing