小编tsc*_*tao的帖子

我编写了一个组件（组件 B），它通过这样的插槽接受自定义组件列表

// Component A
<div class="component-a">
  ...
  <component-b>
    <component-x></component-x>
    <component-y></component-y>
  </component-b>
  ...
</div>

我想将组件 x 和 y 包装在其他组件中，例如 li 标签。

// Output
...
<ul>
  <li><component-x></component-x></li>
  <li><component-y></component-y></li>
</ul>
...

我试过

// Component B
<div class="component-b">
  <ul>
    <li v-for="item in $slots.default">
      <component :is="item"></component>
    </li>
  </ul>
</div>

它不起作用。该项目是 VNode 对象，无法使用组件标签进行渲染。有没有办法解决这个问题？

编辑：我的包装组件不是 li 标签，它是一个自定义组件，具有我在组件 B 中设置的指定道具。如果我从组件 A 包装它们，我需要重复编写自定义组件及其道具。

Edit2: Render 函数也许可以解决这个问题，但我正在寻找带有 html 模板（单文件组件）的解决方案。

为什么价差运营商会在这里用'HB woodlawn'取代'Stratford'的价值？这是如何运作的？

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name
      }
    } else {
      return item
    }
  })

let schools = [
  { name: "Yorktown"},
  { name: "Stratford" },
  { name: "Washington & Lee"},
  { name: "Wakefield"}
]
let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
console.log( updatedSchools[1] ) // { name: "HB Woodlawn" }
console.log( schools[1] ) // { name: "Stratford" },