decorator-webcomponent

1. 安装

npm i @omniui/decorator-webcomponent

2. 自定义组件

import { customElement, OmniuiElement, property } from '@omniui/decorator-webcomponent';
import style from  './App.css'

function App() {
  return (
    <div>
      wwwsss
      <my-component count="23"></my-component>
    </div>
  );
}

const H = () => {
  return (
    <h1>wwww</h1>
  )
}
@customElement({ tag: 'my-component', style })
export class MyComponent extends OmniuiElement {
  @property({type: Number}) count = 0

  handleClick = () => {
    this.count += 1
  }

  componentDidMount(){
    console.log('componentDidMount')
  }

  componentWillUnmount(){
    console.log('componentWillUnmount')
  }

  render() {
    return (
      <div className="content">
        <h1>ssssxxxxx</h1>
        <div onClick={this.handleClick}>{this.count}</div>
        <H/>
      </div>
    )
  }
}

export default App;