Как правильно динамически обновлять элементы слота? - PullRequest
Новая
       8

Как правильно динамически обновлять элементы слота?

1 голос
/ 04 июня 2019

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

my-menu.tsx 

render() {
  return (
    <div>
      <h2>Menu</h2>
      <ul class="menu">
        <slot />
      </ul>
    </div>
  );
}

использовать его page.jsx

renderMenuItems() {
   const menu = ['item 1', 'item 2', 'item 3'];

   return menu.map(item => <li key={item}>{item}</li>);
}

render(){
  return(
    <my-menu>
      {renderMenuItems()}
    </my-menu>
  )
}

мой начальный DOM выглядит так: 

<my-menu>
  <h2>Menu</h2>
  <ul class="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</my-menu>

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

const menu = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']

DOM выглядит следующим образом: 

<my-menu>
  <h2>Menu</h2>
  <ul class="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <li>item 4</li>
  <li>item 5</li>
</my-menu>

Динамически добавленные элементы меню расположены не в том месте - вне блока меню.

Как я могу динамически изменять элементы слотов, чтобы они отображались справаместо?Заранее спасибо.

...