本文介绍了映射引导转盘项目时出现.active类问题！！(反应)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试映射一些引导转盘传送带项目，但我认为我的问题出在.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类问题！！(反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！