React中如何将数组元素渲染为图文交替的布局

你只需要在遍历数组时获取当前项的索引，根据索引的奇偶性交换图片和内容的展示顺序即可，这里提供两种常用实现方式： #

方案1：利用flex布局的反转属性（推荐，代码更简洁） #

如果你用的是Bootstrap栅格系统，可以直接用内置的flex-row-reverse类实现顺序反转：

<div className="container">
{items.map((item, index) => (
    <div className={`row ${index % 2 === 1 ? 'flex-row-reverse' : ''}`} key={item.id}>
        <div className="col-6">
            <img src={item.img} alt="" />
        </div>
        <div className="col-6">
            <p>{item.content}</p>
        </div>
    </div>
))}
</div>

逻辑说明：

• 每条数据单独包裹一个row容器，避免栅格错位
• 索引为奇数的项（从0开始计数，对应第二、第四等条目）添加flex-row-reverse类，自动交换左右两栏的位置，无需重复编写DOM结构
• 记得给遍历生成的元素添加唯一key属性，避免React框架报错

方案2：条件渲染结构顺序 #

如果不依赖flex反转类，也可以直接根据索引判断渲染顺序：

<div className="container">
{items.map((item, index) => (
    <div className="row" key={item.id}>
        {index % 2 === 0 ? (
            <>
                <div className="col-6">
                    <img src={item.img} alt="" />
                </div>
                <div className="col-6">
                    <p>{item.content}</p>
                </div>
            </>
        ) : (
            <>
                <div className="col-6">
                    <p>{item.content}</p>
                </div>
                <div className="col-6">
                    <img src={item.img} alt="" />
                </div>
            </>
        )}
    </div>
))}
</div>

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