React 样式的组件为道具添加自定义逻辑？

Question

我正在尝试将这个活动类逻辑复制到我的样式组件中，但我不明白如何编写它。

这是常规代码

        <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 是否用于样式组件中的道具，所以我不知道我该怎么写？

Answer 1

你可以使用

opacity: ${({active}) => (active ? '1' : '0')};

然后

slides.map((s, i) => <Slide active={curr === i}>...</Slide>)