Блог

https://codepen.io/mic1/project/editor/ANwjrN

скелетный код Vue…

 <SiteHeader>
  <Dropdown>
    <template id="trigger" #trigger="{ hasFocus, isOpen }">
      <span class="block":class="[(hasFocus || isOpen) ? 'border-white']"></span>
    </template>
    <template id="dropdown" #dropdown>
      <div></div>
    </template>
  </Dropdown>
</SiteHeader>

<Dropdown>
  <slot name="trigger" :hasFocus="buttonHasFocus" :isOpen="isOpen"></slot>
  <slot name="dropdown"></slot>

</Dropdown>
 

В pen я пытаюсь понять, как перевести выпадающие данные в триггер без сложности (по моему мнению) реквизитов рендеринга. Я помню, как где-то читал, что это можно сделать с помощью перехватов, но означает ли это перенос useContext и Provider, что также кажется излишним?

Я думаю, вам придется использовать метод render props для передачи данных и инкапсуляции их в родительский компонент. пример: в вашем раскрывающемся компоненте

 const DropDown = ({children}) => {
  const [buttonHasFocus, setButtonHasFocus] = useState(false);
  const [isOpen, setisOpen] = useState(false);
  
  return (
      <div>
        DropDown1
          {{children(buttonHasFocus, isOpen)}}     
      </div>
  )
};
 

а затем просто используйте его следующим образом

 <DropDown>
  {(hasFocus, isOpen) => (
    <>
      <Trigger hasFocus={hasFocus} isOpen={isOpen} />
      <Drop hasFocus={hasFocus} isOpen={isOpen} />
    </>
  )}
</ DropDown>
 

теперь любое изменение в переданном состоянии внутри выпадающего компонента будет немедленно отражаться на компонентах Trigger и Drop.