秘银：使用 jsx 时将子元素包装在数组中答案

【问题标题】：Mithril: Wrapping children in an array when using jsx秘银：使用 jsx 时将子元素包装在数组中
【发布时间】：2019-10-21 09:37:42
【问题描述】：

我已经很接近让 jsx 与秘银一起工作了。

但是，秘银希望您将子元素包装在一个数组中。它没有在秘银文档中显示超过一个元素的 jsx 示例。

所以一个秘银组件比如

'use strict'

import m from 'mithril';

export default m.Component = {
    view () {
        return (
            <div className={'xxxx'}>
                <div className={'xxxx'}>
                    <div className={'xxxxx'}>
                        <h2>xxxxx</h2>
                        <p>xxxxxx</p>
                        <p>xxxxxx</p>
                    </div>
                </div>
            </div>
        )
    }
};

产生错误信息

Mithril v1.0.0 only supports 3 arguments, wrap children in an array.

并且组件无法呈现。当我只有标题而没有段落元素时，它就起作用了。如何以 jsx 解析的方式将三个元素包装在一个数组中？

【问题讨论】：

标签： javascript typescript jsx mithril.js

【解决方案1】：

如果将divs 等包裹在大括号中，则可以将它们包裹在数组中，如下所示：

...
  return (
     <div className={'xxxx'}>
        <div className={'xxxx'}>
          <div className={'xxxxx'}>
          { [
            <h2>xxxxx</h2>,
            <p>xxxxxx</p>,
            <p>xxxxxx</p>
          ] }
          </div>
        </div>
     </div>,
  )
...

【讨论】：

谢谢，这很有帮助。数组必须在中间三个元素上。列表末尾的逗号引导我找到了解决方案。
哦，我明白了，很抱歉我错过了。

【解决方案2】：

我缺少的是列表元素之间的逗号。

        return (
            <div className={'xxxx'}>
                <div className={'xxxxx'}>
                    <div className={'xxxx'}>
                        {[
                            <h2>xxx</h2>, // Comma here
                            <p>xxxx</p>, // Comma here
                            <p>xxxx</p>
                        ]}
                    </div>
                </div>
            </div>
        )

【讨论】：