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中比较一下吗? &lt;Slide curr=i==curr /&gt; 【参考方案1】:

你可以使用

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

然后

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

【讨论】:

以上是关于React 样式的组件为道具添加自定义逻辑?的主要内容,如果未能解决你的问题,请参考以下文章

使用状态自定义样式的反应+样式化组件

打字稿中的样式组件“as”道具和自定义道具

React:为啥我不能向我的组件添加自定义样式类?

道具不会传递给 React Native Navigation v2 中的自定义顶部栏标题组件

传入样式表作为功能组件中渲染的道具

在 react-router v4 中将自定义道具传递给路由器组件