映射引导轮播项目时的.active类问题！ （反应）

Question

我正在尝试映射一些引导轮播项目，但我认为我的问题在于 .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>

Answer 1

您需要有条件地设置“活动”类。因为现在您所有的轮播项目都有“活动”类。你可以这样做：

// 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" }>