如何在组件外部的函数中设置道具的状态

如何解决如何在组件外部的函数中设置道具的状态

我正在使用react bootstrap软件包在我的应用程序中显示一个手风琴菜单。我使用了组件外部的自定义ContextAwareToggle函数来更改打开或关闭菜单时的样式。现在，我想根据菜单是否打开显示一个新样式的组件。我可以使用切换点击侦听器对组件中呈现的普通元素执行此操作，并更改道具的状态。但是，我无法在ContextAwareToggle函数中更改道具的状态，有没有一种方法可以在函数中更改组件外部的状态。

这是ContextAwareToggle

  function ContextAwareToggle({ children,eventKey,callback }) {
  const currentEventKey = useContext(AccordionContext);

  const decoratedOnClick = useAccordionToggle(
    eventKey,() => callback && callback(eventKey),);

  const isCurrentEventKey = currentEventKey === eventKey;

  return (
    <button
      type="button"
      style={{ backgroundColor: isCurrentEventKey ? 'pink' : 'lavender' }}
      onClick={decoratedOnClick}
    >
      {children}
    </button>
  );
}

以下是切换功能：

    toggleYouOpen = () => {
    console.log('TOGGLING');
    this.setState(state => ({YouIsOpen: !state.YouIsOpen}));
}

，并基于YouIsOpen的状态，这是条件渲染函数：

conditionrender = () =>{
    if(this.state.YouIsOpen){
        return <OldPopout></OldPopout>;
    }else{
       console.log("false");
    }
}

如何在组件外部的ContextAwareToggle函数中基于isCurrentEventKey的布尔值设置YouIsOpen的状态？