映射引导转盘项目时出现.active类问题！！(反应)

.active class issue when mapping a boostrap carousel item !! (REACT)(映射引导转盘项目时出现.active类问题！！(反应))

问题描述

<div id="charactersCards" className="carousel slide border border-warning rounded-lg" data-ride="carousel">
            <div className="carousel-inner text-warning">
                {!!store.character &&
                    store.character.results.map((char, i) => (
                        <div key={i} className="carousel-item text-center active">
                            <div className="card d-block w-100">
                                <img src="https://place-hold.it/400x200" className="card-img-top" alt="Image" />
                                <div className="card-body">
                                    <h5 className="card-title">{char.name}</h5>
                                    <p className="card-text text-white">{bio}</p>
                                    <Link
                                        className="btn text-warning border border-warning"
                                        onClick={() => actions.currentCharId(i + 1)}
                                        to={`/iPeopleCard/${i + 1}`}>
                                        Learn More!
                                    </Link>
                                    <i
                                        className="fas fa-heart mt-3 pt-4 ml-3"
                                        onClick={() => actions.setCharToFav(i)}
                                        style={
                                            actions.characterFindInFav(i) ? { color: "yellow" } : { color: "white" }
                                        }
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
            </div>

推荐答案

您需要有条件地设置"活动"类。因为现在您所有的旋转木马项目都有"活动"类。您可以这样做：

// instead of <div key={i} className="carousel-item text-center active">
// write the code below:

<div 
key={i} 
className={i === 0 ? "carousel-item text-center active" : "carousel-item text-center" }>

这篇关于映射引导转盘项目时出现.active类问题！！(反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！