ReactJS点击产品按钮仅打开对应特定下拉菜单问题求解

所有产品的下拉菜单共用了同一个isComponentVisible布尔状态，只要状态为真，所有菜单的show属性都会被判定为真，自然全部同步展开。 #

调整状态定义 #

将原有的布尔类型状态改为存储当前激活的产品ID，实现每次仅展开一个对应菜单的效果：

// 替换原有类似 const [isComponentVisible, setIsComponentVisible] = useState(false) 的定义
const [activeProductId, setActiveProductId] = useState(null)

修改toggle触发逻辑 #

const toggle = (id) => {
  // 点击已展开的产品按钮则关闭菜单，否则切换为当前点击的产品ID
  setActiveProductId(prev => prev === id ? null : id)
}

修正渲染逻辑 #

<div>
  {products.map((value) => (
    // key需放在map循环返回的最外层根元素上，修正原写法的key位置错误
    <div key={value.id}>
      <DropdownMenu show={activeProductId === value.id} ref={ref}>
        {value.name}
      </DropdownMenu>
      <div>{value.name}</div>
      <button type="button" onClick={() => toggle(value.id)}>
        Open
      </button>
    </div>
  ))}
</div>

如果需要支持同时打开多个下拉菜单，可以将状态改为存储所有产品显隐状态的对象：

// 状态定义
const [visibleMap, setVisibleMap] = useState({})

// toggle逻辑
const toggle = (id) => {
  setVisibleMap(prev => ({
    ...prev,
    [id]: !prev[id]
  }))
}

// 菜单show属性改为
show={!!visibleMap[value.id]}

内容的提问来源于stack exchange，提问作者Gray Singh