如何显示隐藏的组件？

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 />