Next.js中如何为偶数序号的post项动态添加指定className

你现有代码不生效有3个核心问题：

• className里直接写{isEven}属于普通字符串内容，JSX不会解析字符串内部的大括号表达式，会直接把{isEven}当成类名文本渲染，无法拿到变量值。
• 数组索引从0开始计数，你写的index % 2 === 0匹配的是索引0、2、4…也就是视觉上第1、3、5个奇数位的项，和你要的偶数序号项不匹配。
• return关键字和后面的括号换行了，JS自动分号补全机制会直接结束return逻辑，后面的JSX元素根本不会被返回渲染。

{this.state.books.map((book, index) => {
    // 序号=索引+1，判断偶数序号用 (index + 1) 取余
    const isEven = (index + 1) % 2 === 0
    console.log('data is '+ isEven);
    // return和括号不要换行，避免自动补全分号问题
    return (
        // 用模板字符串做类名拼接，变量/逻辑放在${}内才会被JSX解析
        <div className={`col-md-4 ${isEven ? 'mt10' : ''} forbcol`}>
            <div className="bookimg">
                <img src="img/forbes.png" />
            </div>
        </div>
    )
})}

• 如果你实际需求是给索引为偶数（0、2、4…）的项加类名，把isEven的判断逻辑改回index % 2 === 0即可。
• 简单的条件类名拼接用模板字符串就足够，如果后续类名判断逻辑变复杂，可以引入classnames库简化写法。

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