.active class 映射引导轮播项目时出现问题！！（反应）

Question

我正在尝试映射一些 bootstrap 轮播项目，但我认为我的问题是 .active class，他们正在将一个映射到另一个上，但无法让我滑动他们将代码放在下面，希望有人能帮助我嘿嘿...

<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

您需要有条件地设置'active' class。因为现在您所有的轮播项目都有 'active' class。你可以这样做：

// 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 class 映射引导轮播项目时出现问题！！（反应）

.active class issue when mapping a boostrap carousel item !! (REACT)

javascript

dictionary

carousel

reactjs

.active class 映射引导轮播项目时出现问题！！ （反应）

.active class issue when mapping a boostrap carousel item !! (REACT)

javascript

dictionary

carousel

reactjs

.active class 映射引导轮播项目时出现问题！！（反应）