Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

传入类型是HTMLCollection,要如何解析到Omi里面? #945

Open
WaterAndBin opened this issue Feb 24, 2025 · 5 comments
Open

传入类型是HTMLCollection,要如何解析到Omi里面? #945

WaterAndBin opened this issue Feb 24, 2025 · 5 comments

Comments

@WaterAndBin
Copy link

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

@dntzhang
Copy link
Collaborator

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
Copy link
Collaborator

转成html?

@WaterAndBin
Copy link
Author

WaterAndBin commented Feb 27, 2025

转换为html?

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

我尝试在用该框架使用跨端的时候,因为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元素与类型,如下图:

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

@WaterAndBin
Copy link
Author

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants