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

秘银：使用jsx将孩子包装在数组中

2 个答案: