如何显示隐藏的组件？答案

【问题标题】：How to show hidden components?如何显示隐藏的组件？
【发布时间】：2020-03-29 11:36:23
【问题描述】：

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

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

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>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

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

<element hidden={hide} />

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

【讨论】：

你好维克多。它确实可以接收真假。我试过这个，但现在evertyhing要么隐藏要么显示。我试图只让那些标记为“已完成”的内容消失/显示
获取数组中元素的索引，只隐藏被标记的元素。如果你解决了，请告诉我。

【解决方案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 时

【讨论】：