如何显示隐藏的组件？

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 = () => {&nbsp; setHide(!hide);};然后在具有该属性的 jsx 标记中hidden，您可以这样做：<element hidden={hide} />让我知道隐藏属性是否可以像上面的代码一样接收 True 或 False。

Answer 2

您可以将另一个类像列表hide-hidden的包装器<Booking />并应用样式.hide-hidden li.hidden { display: none }然后你可以有条件地添加类const DisplayBookings = () => {&nbsp; const [showHidden, setShowHidden] = useState(false)&nbsp; //..&nbsp; return (&nbsp; &nbsp; //...&nbsp; &nbsp; <ol className={!showHidden && 'hide-hidden'}>&nbsp; &nbsp; {/* ... Booking list ... */}&nbsp; &nbsp; </ol>&nbsp; &nbsp; <button onClick={() => setShowHidden(true)}>&nbsp; &nbsp; &nbsp; Show hidden&nbsp; &nbsp; </button>&nbsp; &nbsp; //...&nbsp; )}或者您可以将showHidden状态Booking作为道具传递&nbsp;<Booking showHidden={showHidden} {...otherProps} />并且只在里面Booking添加hidden类<li />props.showHidden && hidden == true