Блог

Я пытаюсь создать компонент панели, который имеет возможность быть завернутым в компонент группы панелей. Основная функция компонентов panelGroup-это запрос дочерних компонентов панели и определение наличия определенных условий, чтобы он мог добавить опору z-индекса к каждому из них в соответствии с условиями.

1. Расположена ли панель слева, справа, сверху или снизу
2. Является ли это вложенной панелью

Для каждого условия потребуется z-индекс, который может быть выше остальных, а также располагаться перед самым высоким z-индексом, найденным на странице. Я хотел бы иметь возможность повторять, хотя дочерние элементы внутри эффекта использования и после выполнения логики для определения иерархии, добавьте z-индекс к каждому дочернему элементу в качестве опоры. Я попытался использовать React.Дочерние элементы отображают и используют cloneElement для добавления z-индекса, однако проблема в том, что этот метод должен вызываться внутри рендеринга/возврата, и когда открывается вторая панель, она заставляет любую другую открытую панель закрываться и открываться снова. Есть ли способ обновить реквизиты без использования API реакции верхнего уровня?

API панельной группы

 lt;PanelGroupgt;  lt;Panel  id={'1'}  open={open1}  onClosed={handleClose1}  controller={true}  renderPortal={true}  position={PanelPosition.RIGHT}  gt;  lt;divgt;  lt;h2gt;Panel Slide Leftlt;/h2gt;  lt;button onClick={handleClose1}gt;Closelt;/buttongt;  lt;/divgt;  lt;/Panelgt;  lt;Panel  id={'2'}  open={open2}  onClosed={handleClose2}  controller={true}  renderPortal={true}  position={PanelPosition.LEFT}  gt;  lt;divgt;  lt;h2gt;Panel Slide Rightlt;/h2gt;  lt;button onClick={handleClose2}gt;Closelt;/buttongt;  lt;/divgt;  lt;/Panelgt; lt;/PanelGroupgt;  

Это то, что я пробовал, но это не работает

 const PanelGroup = ({  children }: PanelGroupProp): JSX.Element =gt; {   const [highestZIndex, setHighestZIndex] = React.useState(null);   /**  * Handles finding the highest index on the page after render. This value  * will be used as the benchmark to set the z-index of the panel  * components managed by this component.  */  React.useEffect(() =gt; {  const highestIndex = getHighestZIndex();   setHighestZIndex(highestIndex);  }, []);   const renderGroupPanelChildren = (children): React.ReactElement =gt; {  let incrementor = highestZIndex   1;   return (  lt;React.Fragmentgt;  {React.Children.map(children || null, (child) =gt; {  const newProps = {...child.props, ZIndex: incrementor };   incrementor  ;   return lt;child.type {...newProps } key={getGuid()} /gt;;  })}  lt;/React.Fragmentgt;  );  };   return (  lt;gt;  lt;PanelOverlay visibility={false} /gt;  {renderGroupPanelChildren(children)}  lt;/gt;  ); };  

I would like to find a way to do something like:

 const PanelGroupComponent = ({  children }: PanelGroupProp): JSX.Element =gt; {   const [highestZIndex, setHighestZIndex] = React.useState(null);  const [elements, setElements] = React.useState(null);   /**  * Handles finding the highest index on the page after render. This value  * will be used as the benchmark to set the z-index of the panel  * components managed by this component.  */  React.useEffect(() =gt; {  const highestIndex = getHighestZIndex();   setHighestZIndex(highestIndex);  }, []);   React.useEffect(() =gt; {  // logic to set z-index's ....  const elements ....     setElements(elements);    }, [highestIndex]);   return (  lt;gt;  lt;PanelOverlay visibility={false} /gt;  {elements}  lt;/gt;  ); };