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

问题描述

我正在使用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的状态？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）