Мифрил: упаковка детей в массив при использовании jsx

Question

Я так близок к тому, чтобы заставить 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 будет анализировать?

Answer 1

Вы можете заключить divs и тому подобное в массив, если вы заключите их в фигурные скобки, например:

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

Answer 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>
        )