时间戳

首页 > 解决方案 > 如何显示隐藏的组件？

javascript - 如何显示隐藏的组件？

问题描述

这是标记为完成并在标记后消失的服务列表。

我的组件有以下代码。当用户单击“完成”按钮时，类会发生变化（首先变为“预订完成”），组件的颜色也会发生变化。半秒后，组件也被隐藏（添加了“隐藏”类。）。

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>

标签： javascriptreactjs

解决方案

假设hidden可以接收 True 或 False，您可以这样做：

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

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

然后在具有该属性的 jsx 标记中hidden，您可以这样做：

<element hidden={hide} />

让我知道隐藏属性是否可以像上面的代码一样接收 True 或 False。

推荐阅读