reactjs - 使用 Styled Components 的条件样式

Question

我已经尝试了几个小时来解决这个问题，我相信答案很简单。当一个项目被点击时，它最终会为我的待办事项列表创建一个过滤器。我正在努力做的是应用条件样式，以便“事件”项目的字体颜色为蓝色。

我已经将 status 作为 Prop 包含在内，但我似乎无法像在样式组件中使用 Prop 一样使用它。

来 self 的 App.js:

import { useState } from 'react'

function App() {
  const [ status, setStatus ] = useState("all")

  return (
    <Filter status={status} setStatus={setStatus}/>
  )
}

过滤器.js

const Container = styled.div`
    display: flex;
    justify-content: center;
`

const Item = styled.p`
   color: red;

   // I'm trying to do something like this..

   ${(status, props) => {
        if (status === props.id) {
            return `
                color: blue;
            `
        }
    }}
   
`

export const Filter = ({ setStatus, status }) => {
    
    const statusHandler = (e) => {
        if (e.target.id) {
            setStatus(e.target.id)        
        }
    }
    
    return (
        <div>
          <Container onClick={statusHandler}>
            <Item id="all">All</Item>
            <Item id="active">Active</Item>
            <Item id="completed">Completed</Item>
          </Container>
        </div>
    )
}

Answer 1

我认为执行此任务最简单的方法是在要更改颜色的元素处添加一个类。

所以你的项目将是

const Item = styled.p`
   color: black;
   &.selected {
    color: red
   }

你的组件将是:

<>
    <Item id="all" className={status === "all" ? "selected" : null}>All</Item>
    <Item id="active" className={status === "active" ? "selected" : null}>Active</Item>
    <Item id="completed" className={status === "completed" ? "selected" : null}>Completed</Item>
</>

为避免编写重复代码，您可以循环这些值。我们开始吧:

const items = [
    {
        id: "all",
        value: "All"
    },
    {
        id: "active",
        value: "Active"
    },
    {
        id: "completed",
        value: "Completed"
    },
]

items.map(({id, value}) => (
    <Item key={id} id={id} className={status === id ? "selected" : null}>{value}</Item>
))

如果可以保留在 React 中，则无需将逻辑放在 Styled Component 中