我可以将多个道具传递到样式组件的一个规则中吗 (react.js)

Question

我已经构建了这个滑块，并希望左边的图标具有不透明度：0.5，当显示第一张图片时。如果显示最后一张图片，那么“右边”的图标应该有 opacity:0.5。我如何使用样式组件中的道具来做到这一点？感谢您的帮助。

这不起作用：不透明度：${props=>props.direction === "left" && props.id === 1 && "0.5"};

import styled from "styled-components";
import {IoIosArrowForward, IoIosArrowBack} from "react-icons/io";
import { bilderserie } from "../data";
import { useState } from "react";
const Container = styled.div`
    width:100%;
    height:100vh;
    background: #242121;
    position:relative;
`;
const Icon = styled.span`
    background:transparent;
    width:50px;
    height:50px;
    border: 2px solid var(--white);
    border-radius:50%;
    display: flex;
    align-items:center;
    justify-content:center;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    left: ${props=>props.direction ==="left" && "20"}px;
    right: ${props=>props.direction ==="right" && "20"}px;
    z-index:3;
    cursor: pointer;
        & .arrow{
            color: var(--white);
            font-size: 40px;
        }
`;
const Wrapper = styled.div`
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    overflow:hidden;
`;
const SliderItem = styled.div`
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    transform: translateX(${props=>props.slideIndex * - 100}%);
`;
const ImageHolder = styled.div`
    width:80%;
    height:80%;
    margin-top:50px;
    margin-right:auto;
    margin-left:auto;

`;
const Img = styled.img`
    width:100%;
    height:100%;
    object-fit:cover;
`;
const ContentHolder = styled.div`
    width:100vw;
    height:200px;
    position:sticky;
    bottom:0;
    background: rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    padding:20px;
`;
const Content = styled.p`
    color: var(--white);
`;

const Bilderserien = () => {
        const [sliderPosition, setSliderPosition] = useState(0);
    const handleClick = (name)=>{
            if(name === "left"){
                setSliderPosition(sliderPosition > 0 ? sliderPosition -1 : 0);
            }
            else{
                setSliderPosition(sliderPosition < 4 ? sliderPosition +1 : 4);
            }
    }
    
  return (
    <Container>
        <Icon direction="left" onClick={()=>handleClick("left")} id={bilderserie.id}>
            <IoIosArrowBack className="arrow"/>
        </Icon>
        <Wrapper>
            {
                bilderserie.map((serie)=>(
                    <SliderItem key={serie.id} slideIndex={sliderPosition}>
                        <ImageHolder>
                            <Img src={serie.img} alt={serie.alt} title={serie.title}/>
                        </ImageHolder>
                        <ContentHolder>
                                <Content>{serie.content}</Content>
                            </ContentHolder>
                    </SliderItem>
                ))
            }
        </Wrapper>
        <Icon direction="right" onClick={()=>handleClick("right")} id={bilderserie.id}>
            <IoIosArrowForward className="arrow"/>
        </Icon>
    </Container>
  )
}

export default Bilderserien

Answer 1

请测试一下。在您的两个条件周围使用括号：

 opacity: ${props=>(props.direction === "left" && props.id === 1) && "0.5"};

注意：

Answer 2

因此，当任何人想要构建一个滑块时，当显示第一张图片时，左侧图标的不透明度为 0.5。如果显示最后一张图片，那么“右”图标应该有 opacity:0.5 这就是最终对我有用的东西：

import styled from "styled-components";
import {IoIosArrowForward, IoIosArrowBack} from "react-icons/io";
import { bilderserie } from "../data";
import { useState } from "react";
const Container = styled.div`
    width:100%;
    height:100vh;
    background: #242121;
    position:relative;
`;
const Icon = styled.span`
    background:transparent;
    width:50px;
    height:50px;
    border: 2px solid var(--white);
    border-radius:50%;
    display: flex;
    align-items:center;
    justify-content:center;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    left: ${props=>props.direction ==="left" && "20"}px;
    right: ${props=>props.direction ==="right" && "20"}px;
    z-index:3;
    cursor: pointer;
        & .arrow{
            color: var(--white);
            font-size: 40px;
        }
`;
const Wrapper = styled.div`
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    overflow:hidden;
`;
const SliderItem = styled.div`
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    transform: translateX(${props=>props.slideIndex * - 100}%);
`;
const ImageHolder = styled.div`
    width:80%;
    height:80%;
    margin-top:50px;
    margin-right:auto;
    margin-left:auto;

`;
const Img = styled.img`
    width:100%;
    height:100%;
    object-fit:cover;
`;
const ContentHolder = styled.div`
    width:100vw;
    height:200px;
    position:sticky;
    bottom:0;
    background: rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    padding:20px;
`;
const Content = styled.p`
    color: var(--white);
`;

const Bilderserien = () => {
        const [sliderPosition, setSliderPosition] = useState(0);
    const handleClick = (name)=>{
            if(name === "left"){
                setSliderPosition(sliderPosition > 0 ? sliderPosition -1 : 0);
            }
            else{
                setSliderPosition(sliderPosition < 4 ? sliderPosition +1 : 4);
            }
    }
    
  return (
    <Container>
        <Icon direction="left" onClick={()=>handleClick("left")} style={sliderPosition === 0 ? {opacity:"0.5"} : {opacity:"1"}}>
            <IoIosArrowBack className="arrow"/>
        </Icon>
        <Wrapper>
            {
                bilderserie.map((serie)=>(
                    <SliderItem key={serie.id} slideIndex={sliderPosition}>
                        <ImageHolder>
                            <Img src={serie.img} alt={serie.alt} title={serie.title}/>
                        </ImageHolder>
                        <ContentHolder>
                                <Content>{serie.content}</Content>
                            </ContentHolder>
                    </SliderItem>
                ))
            }
        </Wrapper>
        <Icon direction="right" onClick={()=>handleClick("right")} style={sliderPosition === 4 ? {opacity:"0.5"} : {opacity:"1"}}>
            <IoIosArrowForward className="arrow"/>
        </Icon>
    </Container>
  )
}

export default Bilderserien

我可以将多个道具传递到样式组件的一个规则中吗 (react.js)

Can I pass several props into one rule of a styled component (react.js)

reactjs

styled-components