我有一个Card组件，它有4种可能的状态：“活动”，“选定”，“丢弃”，“完成”。根据状态，我需要显示不同的CSS类。
通过点击卡片的特定部分来设置状态，每个部分都是一个“切换”（一次点击设置，另一次点击“取消设置”）：

• 默认状态是活动的，
• 如果用户点击卡片，它就会被选中（我需要添加的css类是“overlay-selected”）
• 如果用户点击“discard”按钮，卡片内的按钮将设置为“discard”（我需要添加的css类是“overlay-discard”）
• 如果用户点击“完成”按钮卡内设置为“完成”（我需要添加的CSS类是“覆盖完成”）

状态存储在“App”级别，我通过props将其传递给组件，这意味着为了更新状态，我将一些“处理程序”从应用传递给组件（SelectCard，DiscardCard）
下面是我的代码。
我认为我处理这个问题的方式并不理想，因为我在如何最好地定义变量的ClassName上遇到了问题。
我最初考虑过使用三元if语句，但是如果有多个状态，它就不起作用了，特别是因为我需要处理“toggle”用例。
应用程序

function App() {
  const [people, setPeople] = useState(data['people'].map(
    el=>{
      return {
        ...el,
        'key' : nanoid(),
      }
    }
  ))

 

  function SelectCard(CardKey){
    setPeople(oldPeople=>{
      return oldPeople.map(el=>{

        return el.key === CardKey
                ? { ...el, 'selected':!el.selected}
                : { ...el, 'selected':false}
          })
    })
  }

  function DiscardCard(CardKey){
    setPeople(oldPeople=>{
      return oldPeople.map(el=>{

        return el.key === CardKey
                ? { ...el, 'active':!el.active}
                : { ...el}
          })
    })
  }

  const cards = people.map(el=>{
    return <Card 
            key = {el.key} 
            item={el} 
            onPress={()=>SelectCard(el.key)}
            onDiscard={()=>DiscardCard(el.key)}
          />
  })

  
  return (
    <div className="App">
      <div className='container'>
        <div className='left'>
          <div className='cards'>
            {cards}
          </div>
        </div>
        <div className = 'right'>
          ....
        </div>
     </div>
     
    </div>
  )
}

export default App

卡片

function Card(props) {

  const className = `card ${props.item.selected ? "overlay-selected" : ""}`

  return (
    <div 
        className={className} 
        onClick={(event)=>{props.onPress()}}>

        <img className='card-img' alt='Card Image' src={props.item.img} />
        <h3 className='card-title'>{props.item.name} </h3>
        
        { props.item.selected ? 
        
            <div className='card-cta'>
                <button 
                    className='btn btn-back'
                    onClick={ props.item.selected ?  (event)=>
                        { 
                            event.preventDefault()
                            props.onPress
                        }
                         : ()=>{}}
                >Back</button>
                <button 
                    className='btn btn-discard'
                    onClick={ props.item.selected ?  (event) =>{
                            event.preventDefault()
                            props.onDiscard 
                        } 
                        :
                        ()=>{}}
                >Discard</button>
            </div>
        : 
        <p className='card-description'>{props.item.description} </p>  
    
        }
        
    </div>
  )
}