JSFiddle - React, Tailwind, and code Playground

by luodan

HTML

<script type="module">
	import FoxView from 'https://unpkg.com/foxview/dist/foxview.es.dev.js'
  window.FoxView = FoxView
</script>
<script nomodule
src="https://unpkg.com/foxview">
</script>

<div id="app-4">
</div>

JavaScript

const {render,html,WebComponent :Component,defineWebComponent:defineComponent,property} = FoxView
// 定义名为 counter 的计数器组件
class Counter extends Component{
	static get properties(){
  	return {
    	initValue:{type:Number}
    }
  }
  constructor(props){
    super(props);
    this.state = {
      count:null
    }
  }
  static getDerivedStateFromProps(props,state){
  	if(state.count == null){
    	return {
      	count:props.initValue
      }
    }
  }
  add(){
    this.setState({
      count:this.state.count + 1
    })
  }
  minus(){
    this.setState({
      count:this.state.count - 1
    })
  }
  render(){
    return html`
    <style>
    	button{
      	background-color:black;
        color:white;
      }
    </style>
    <div>
      <button @click=${this.add}>add</button>
      <button @click=${this.minus}>minus</button>
      <div>
        result:${this.state.count}
      </div>
    </div>`
  }
}
defineComponent('custom-counter',Counter)



render(
  html`<div>
    <custom-counter .initValue="${5}"></custom-counter>
  </div>`,
  document.getElementById('app-4')
)