ReactJS中的引导下拉列表，一次仅打开一个

我有一个页面包含多个引导卡，每个卡都是一个组件，每个卡脚也是一个组件。卡片页脚包含按钮。当您点击一个按钮时，下拉列表将打开，如下所示

在我单击按钮的任何时候，其他下拉列表都应该处于关闭状态。但事情是这样的

要求：还有一件事是，当我点击同一个按钮时，相应的下拉列表应该关闭

要求：当我点击下拉列表中的任何项目时，相应的下拉列表应关闭

我的架构如下所示

主页组件代码-开始

类主页扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
ActivatedStoredInParent:“
};
}
ToggleCounterMenu=（名称）=>{
var name1=名称；
this.setState（（prevState）=>{
返回{
ActivateDistoreInParent:名称1
}
});
} 
render（）{
constproducts=this.state.items.map（（项，索引）=>{
返回
;
});
返回(
{产品}
);
}
}
导出默认主页

您可以使用

组件diddupdate

生命周期来更新打开下拉列表的状态属性。 我不知道是

open

还是

show

属性显示了下拉列表的内容，但这是我的逻辑

class ButtonDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 
    };
  }

  componentDidUpdate(prevProps) {
    const name = this.props.product.name + '$$' + this.props.text;

    if (prevProps.activatedIdStoredInParent !== this.props.activatedIdStoredInParent && this.props.activatedIdStoredInParent !== name) {
      this.closeDropDown();
    }
  }

  closeDropDown = () => this.setState({ isOpen: false });

  toggleOpen = (e) => {
    //
  }

  numberClick = (e) => {
   //
  }

  render() {
   //
  }
}

export default ButtonDropdown;

---

我没有答案给你，但是感谢你的深入解释和格式：）！不使用

react bootstrap

中的

DropdownButton

组件的任何原因？你好，苏佩特，谢谢你的回答。成功了。如果您在componentDidUpdate中编写，它每次都会调用，这将是性能问题。你说。。请您解释一下。您可以使用

PureComponent

来提高性能。关于componentDidUpdate的使用，除非您摆脱状态并仅使用父容器的道具，否则我看不到使用当前体系结构打开和关闭组件的其他方法。感谢您的回复。“除非你摆脱状态，只使用父容器的道具”。这个架构到底是什么，你能告诉我吗。

const name=const name=this.props.product.name+'$$'+this.props.text

const show=name==this.props.activatedStoredinParent

然后在类名中使用show变量如果我删除这个“this.props.activatedStoredinParent！==name”它将进入无限循环。如果我的json有更多像10000这样的对象，那么这段代码可行吗？