如何显示隐藏的组件？

Question

这是标记为完成并在标记后消失的服务列表。我的组件有以下代码。当用户单击“完成”按钮时，类会发生变化（首先变为“预订完成”），组件的颜色也会发生变化。半秒后，组件也被隐藏（添加了“隐藏”类。）。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);

};

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

<element hidden={hide} />

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

Answer 2

您可以将另一个类像列表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>

    //...

  )

}

或者您可以将showHidden状态Booking作为道具传递

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

并且只在里面Booking添加hidden类<li />props.showHidden && hidden == true