如何显示列表的单个隐藏元素并隐藏其余元素

Question

我有一个元素列列表，每个元素都有隐藏的div，我想在单击时显示隐藏的元素，但是当我单击另一个div时，我想隐藏当前并显示我上次单击的那个，我怎样才能正确做到这一点？

Answer 1

你可以有两个特定的类，一个隐藏元素，另一个显示元素。 单击元素时，您可以使用 jQuery 或 JavaScript 切换显示该特定元素的隐藏div 元素的类，并隐藏任何其他div 的所有内容。

Answer 2

您正在渲染的组件可以采用活动道具，并且仅在此道具为真时才渲染第二个div。

这样，您就可以跟踪在父元素中选择了哪个元素。

我用非常简单的内容拼凑了一个工作示例

import React, { useState } from 'react';
const ListItem = ({id, isActive, handleClick}) => {
return (
<div id={id} onClick={handleClick}>
Here is the element
{!!isActive && <div>I am the selected element</div>}
</div>
);
};
export const List = () => {
const [selectedItem, setSelectedItem] = useState();
const items = ['one', 'two', 'three'];

const handleClick = (event) => {
setSelectedItem(event.target.id);
}
return (
<div>
{items.map(item => (
<ListItem id={item} isActive={item===selectedItem} handleClick={handleClick}/>
))}
</div>
)
}