映射对象数组到React组件时如何比较当前项与前一项的属性值

你可以直接利用Array.prototype.map的原生入参实现需求，不需要额外遍历或存储中间状态，具体代码如下：

const PersonsMonth = ({persons}) => {
    // 用空数组兜底避免persons为undefined时报错
    const personsList = (persons ?? []).map((person, index, originArr) => {
        // 第一个元素没有前序对比对象，直接返回Person组件
        if (index === 0) {
            return <Person key={person.Id} person={person}/>
        }
        const formerPerson = originArr[index - 1]
        // 多个并列节点用Fragment包裹，不生成冗余DOM
        return (
            <React.Fragment key={person.Id}>
                {person.height > formerPerson.height && <div className="taller">!</div>}
                {person.height < formerPerson.height && <div className="shorter">!</div>}
                <Person person={person}/>
            </React.Fragment>
        )
    })
    
    return (
        <>
            <h3>Group members</h3> 
            {personsList}
        </>
    )
}

要点说明 #

• map回调的第三个参数originArr就是你正在遍历的原始person数组，结合当前下标index即可直接取到前一项的person对象
• 并列返回的div和Person组件用Fragment包裹，符合React单根节点的返回要求，也不会额外生成无用的DOM节点
• key统一绑定在Fragment外层，完全符合React列表渲染的key规范
• 如果你的height字段是字符串格式，比较前建议先转成数字类型，避免出现字符串对比的逻辑错误

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