传入类型是HTMLCollection，要如何解析到Omi里面？

[WaterAndBin]

我现在获取到的数据是HTMLCollection类型的，请问要怎么样才能渲染到Omi当中的模版当中？ 在React当中有类型的工具可以帮助生成，例如：html-react-parser。 请问一下Omi是否有方法或者工具可以将HTMLCollection转换成Omi特有的渲染类型？ 非常感谢

[dntzhang]

import { tag, render, h, Component } from 'omi'

const markup = '<h3>Some HTML to render.</h3>'

@tag('my-element')
class MyElement extends Component {
  render() {
    return <div unsafeHTML={{ html: markup }}></div>
  }
}

render(<my-element />, 'body')

[dntzhang]

转成html？

[WaterAndBin]

转换为html？

也不算是转成html吧，就是想把HTMLCollection类型转成如下图的类型。

我尝试在用该框架使用跨端的时候，因为props.children是拿不到外部传进来的元素，因此只能通过this.children去拿到外部传进来的元素。在omi开发当中，同样也是可以用this.children去拿到参数的。例如以下情况：

@tag('text-space')
export default class extends Component {
  static css = [tailwind];

  render() {
    return (
      <div>
        <h2 className="py-3 font-bold text-2xl">间距</h2>
        <y-space>
          <div>123123</div>
          <y-button onClick={() => console.log(123123)}>4444</y-button>
          <div>555</div>
        </y-space>
      </div>
    );
  }
}

export default class Space extends Component<SpaceProps> {
  static css = [tailwind, styleSheet];

  static props = {
    name: {}
  };

  render() {
    console.log(this.children);

    const children = [...this.children];

    return (
      <div>
        {children.map((child, index) => {
          return (
            <div key={index}>
              {child}
            </div>
          );
        })}
      </div>
    );
  }
}

通过上述，可以拿到children元素与类型，如下图：

但是在render函数当中，并不支持将这些参数去渲染到界面当中，只能将这些参数都转化成如图1所示的类型才行。 如果能将const markup = “<h3>Some HTML to render.</h3>”这种字段也转成图1所示的类型更好。

[WaterAndBin]

import { tag, render, h, Component } from 'omi'

const markup = '

Some HTML to render.

'

@tag('my-element') class MyElement extends Component { render() { return <div unsafeHTML={{ html: markup }}> } }

render(, 'body')

像这种情况也尝试过，但是因为类型是对象类型，并不支持这种方法，这种方式只适用于string的情况

[dntzhang]

在render函数里自己封装一个函数把 dom 转成 vnode