React 样式的组件为道具添加自定义逻辑?
Posted
技术标签:
【中文标题】React 样式的组件为道具添加自定义逻辑?【英文标题】:React styled components add custom logic for props? 【发布时间】:2021-03-25 13:22:27 【问题描述】:我正在尝试将这个活动类逻辑复制到我的样式组件中,但我不明白如何编写它。
这是常规代码
<section className="slider">
slides.map((s, i) => (
<div className=i === curr ? "slide active" : "slide" key=s.title>
<div>
<h1>s.title</h1>
<h2>s.subtitle</h2>
</div>
</div>
))
</section>
我正在尝试复制此 className=i === curr ? "slide active" : "slide"
,但使用样式组件。
普通的css就是这样
.slide
opacity: 0;
transition: .3s ease;
.slide.active
opacity: 1;
transition-duration: .2s;
但是在样式化的组件中,这怎么可能实现呢?
样式化组件中的示例
<Slide curr=curr></Slider>
然后是样式
const Slide = styled.div`
transition: 0.3s;
opacity: $(curr) => (curr ? '1' : '0');
`
问题是我无法检查 i === curr
是否用于样式组件中的道具,所以我不知道我该怎么写?
【问题讨论】:
不能直接在组件prop中比较一下吗?<Slide curr=i==curr />
【参考方案1】:
你可以使用
opacity: $(active) => (active ? '1' : '0');
然后
slides.map((s, i) => <Slide active=curr === i>...</Slide>)
【讨论】:
以上是关于React 样式的组件为道具添加自定义逻辑?的主要内容,如果未能解决你的问题,请参考以下文章