javascript - Mithril.js: "Component template must return a virtual element, not an array, string, etc."是什么意思？

Question

试用 mithril.js第一次，如果这是一个简单的问题，我们深表歉意。我收到一条错误消息，

Component template must return a virtual element, not an array, string, etc.

当我嵌套 map() 时另一个组件中的派生组件。

本质上，我试图创建一个类似于以下简化示例的布局，其中地址标签派生自 .map()关闭 ctrl.list()支柱。

<Layout>
    <Left/>
    <Right>
      <Address>
      <Address>
  </Right>
</Layout>

这是一个显示此内容的 jsfiddle。如果你自己安装“Right”组件，它会很好地渲染。只有当该组件嵌套在它失败的另一个组件中时。我缺少什么，将来如何调试？

https://jsfiddle.net/uLmt9qq7/

Answer 1

在 Mithril v0.2.X 中，嵌套组件(即一个组件在另一个组件中)不能返回节点数组¹:它必须返回一个包含多个子节点的包装节点。

由于 Right View 中的拼写错误，您的代码似乎意外违反了该规则:

return m('.right-col'), 
  ctrl.list().map(function(addr){
    return m(Address, {addr: addr});
  })

在伪代码中，这是 return {node}, [list]，其中 {node} 被丢弃， View 返回展开的 [list ] - 触发错误。应该是:

return m('.right-col', 
  ctrl.list().map(function(addr){
    return m(Address, {addr: addr});
  })
)

Here's a fixed fiddle .

¹ 在重写的 Mithril v1.X 中将不再是这种情况，其中组件 View can return lists of nodes directly .