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

【问题标题】：How to show single hidden element of list and hide the rest如何显示列表的单个隐藏元素并隐藏其余元素
【发布时间】：2020-10-12 16:45:46
【问题描述】：

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

【问题讨论】：

这里有很多关于 SO 的例子，它们做同样的事情，做一些 HTML 标记，尝试一些东西，然后问你是否被代码和 sn-p 卡住了。
这能回答你的问题吗？ Show/hide 'div' using JavaScript

标签： javascript html reactjs conditional-statements render

【解决方案1】：

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

【讨论】：

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

【讨论】：