如何顯示列表的單個隱藏元素並隱藏 rest

Question

我有一個元素的列列表，每個元素都有隱藏的 div，我想在點擊時顯示隱藏的元素，但是當我點擊另一個 div 時，我想隱藏當前並顯示我最后點擊的那個，我怎么能做對了嗎？

Answer 1

你可以有兩個特定的類，一個隱藏元素，一個顯示元素。 單擊元素時，您可以使用 jQuery 或 JavaScript 來切換 class 顯示該特定元素的隱藏 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>
    )
}