如何顯示隱藏的組件？

Question

這是被標記為完成並在被標記后消失的服務列表。

我的組件有以下代碼段。 當用戶單擊“完成”按鈕時，類會發生變化（首先變為“預訂完成”），組件的顏色也會發生變化。 半秒后，組件也被隱藏（添加了'hide'類。）。

const Booking = (props) => {
let { hidden } = useContext(ContextBooking)
let completed = props.completed

    return (
            <li 
                className={       
           isCompleted && isHidden
            ? 'booking-complete hide'
            : isCompleted
              ? 'booking-complete'
              : 'booking'
      }}
                key={props.id}
                id={props.id}
            >
                <h3>{props.date}</h3>
                <h4>{props.time}</h4>
                <h5>{props.name}</h5>
            </li>

    )
}

<button
   onClick={() => {
     if (!isCompleted && !isHidden) {
       setIsCompleted(!isCompleted); //adds 'booking-complete' and change colour
       setTimeout(() => setIsHidden(!isHidden), 500) //adds 'hide' class to component and 'display: none'
     else if (isCompleted && !isHidden) {
       setIsCompleted(!isCompleted);
     }
     else {
       setIsCompleted(!isCompleted);
       setIsHidden(!isHidden);
     }
}}>
    {!isCompleted ? `Completed` : `Not completed`}
</button>

在另一個組件中，我正在創建多個“預訂”組件。

我現在的目標是，當單擊“顯示隱藏”按鈕（見下文）時，之前隱藏的所有組件（具有“隱藏”類的組件，如上所述）應該再次出現（我想只是刪除“隱藏”課程會起作用，但如何做到這一點？）

const DisplayBookings = () => {
    const display = (day) => allBookings.map(item => 
        item.day === day &&
        <Booking
            completed={item.completed}
            key={item.id}
            id={item.id}
            time={item.time}
            name={item.name}
            date={item.date} 
        />
    )
   <button
      onClick={() => 
//how to make this button remove the 'hide' class of all <Booking /> components that have it 
//but still show components as 'completed' and other as not?
   }>
    Show hidden      
</button>

Answer 1

假設hidden可以接收 True 或 False，你可以這樣做：

const [hide, setHide] = useState(false);

hideHandler = () => {
  setHide(!hide);
};

然后在具有hidden屬性的 jsx 標記中，您可以這樣做：

<element hidden={hide} />

讓我知道隱藏屬性是否可以像上面的代碼一樣接收 True 或 False。

Answer 2

1. 您可以將另一個類像hide-hidden放在<Booking />列表的包裝器中並應用樣式

.hide-hidden li.hidden { display: none }

然后你可以有條件地添加類

const DisplayBookings = () => {
  const [showHidden, setShowHidden] = useState(false)
  //..
  return (
    //...
    <ol className={!showHidden && 'hide-hidden'}>
    {/* ... Booking list ... */}
    </ol>
    <button onClick={() => setShowHidden(true)}>
      Show hidden
    </button>
    //...
  )
}

2. 或者您可以將showHidden狀態作為道具傳遞給Booking

 <Booking showHidden={showHidden} {...otherProps} />

並且只有在props.showHidden && hidden == true時才在Booking添加hidden類到<li />