Question

我是Web组件和模板的新手。我的菜单中有些项目会动态更改，当我尝试添加某些菜单项时，它会显示在错误的位置。

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>

动态添加的菜单项在错误的位置上-菜单块外部。

如何动态更改插槽元素以在正确的位置显示它们？预先感谢。

动态更新插槽元素的正确方法是什么？

0 个答案: