我创建了一个下拉组件，并在一个组件中调用了它们三次。当我点击一个时，全部打开

Question

我正在单击下拉菜单的一个组件，但所有三个组件都打开了。我是新手，所以如果有人能给我解释一下，我会很高兴的!

这是导航条组件'

const Navbar = () => {

const [selected, setSelected] = useState(false)
return (
<div className='flex justify-evenly items-center h-[80px] bg-black'>
<div className='logo_container'>
<img src={logo} alt='' />
</div>
<div className='flex w-fit gap-2'>
<Dropdown 
name={'Jobs'} 
selected={selected} 
setSelected={setSelected} 
options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
/>
<Dropdown 
name={'Talent'} 
selected={selected} 
setSelected={setSelected} 
options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
/>
<Dropdown 
name={'Reports'} 
selected={selected} 
setSelected={setSelected} 
options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
/>
</div>

</div>
)
}
export default Navbar

这是我的另一个下拉菜单组件

const Dropdown = ({name, selected, setSelected, options}) => {
const [isActive, setIsActive] = useState(false);
return (
<div className='bg-white cursor-pointer w-[100px]'>
<div className='flex justify-between items-center p-2' onClick={((e) => setIsActive(!isActive))}>
{name}
<span><AiOutlineArrowDown /></span>
</div>
{
isActive && (
<div>
{options.map((option) => (
<div
onClick={(e) => {
setSelected(option);
setIsActive(false)
}}
>
{option}
</div>))}
</div>
)
}
</div>
)
}
export default Dropdown

当我点击它时，我希望只打开一个下拉菜单。

Answer 1

使用。map

时设置键如果没有关联的键或有重复的键，Map会导致UI问题。最好确保它们是唯一的。

试试这样做;

{options.map((option) => (
<div
key={`${name}-option`}
onClick={(e) => {
setSelected(option);
setIsActive(false)
}}
>
{option}
</div>))}