Как заставить компонент svelte монтироваться в блоке {#if}

У меня есть боковая панель со складными разделами, в которых используются такие слоты:

<Sidebar> // creates writable context
   <Searchbar /> // updates context

   <Collapsible>
      <MyControl label = "hello" /> // subscribes to context to check if label matches search
      <MyControl label = "world" /> // subscribes to context to check if label matches search
   </Collapsible>
</Sidebar>

Sidebar создает записываемый контекст, который Searchbar обновляется и MyControl подписывается, чтобы проверить, выполняется ли по нему поиск. Моя проблема в том, что мои элементы управления находятся в блоке {#if}, они не монтируются до тех пор, пока Collapsible не будет сначала расширен всего 1 раз, а если они не монтируются, то они никогда не подписываются на контекст, и мой поиск не работает. Как только раздел «Складной» разворачивается всего 1 раз (впоследствии его можно свернуть), моя панель поиска работает.

Складной.Svelte:

{#if expanded}
  <div transition:slide>
     <slot />
  </div>
{/if}

По сути, мой вопрос: могу ли я заставить свой <slot /> смонтироваться? или есть какой-то другой способ решить эту проблему?

Внимательно прочитав ваш вопрос, на него можно ответить: «Вы можете заставить свой слот смонтироваться, не ставя его в #if», потому что вы не добавили никаких уточняющих потребностей. Я предполагаю, что вы хотите, чтобы он был установлен, но не виден, поэтому я бы обернул его чем-то со свойством display: none css, контролируемым expanded вместо #if.

possum 27.02.2024 18:21

да, это вариант, я только что отредактировал свой вопрос, мой <slot /> завернут в div со свойством transition:slide. насколько я знаю, это работает только с условным рендерингом, и я старался избегать использования для этого CSS, поскольку в svelte есть хорошая встроенная анимация, поэтому мне было любопытно, есть ли другой способ @possum

philr 27.02.2024 18:25
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
132
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я решил это сам, используя блок #key и такие переходы входа/выхода:

{#key expanded}
    <div 
          class = {clsx(!expanded && "hidden")}
          in:getAnimation = {{fn: slide, cond: expanded}} 
          out:getAnimation = {{fn: slide, cond: !expanded}}>
         <slot />
    </div>
{/key}

где getAnimation это:

 const getInAnimation = (node, options) => {
   if (options.cond) {
     return options.fn(node, options);
   }
 };

Другие вопросы по теме