vue render JSX表記

vue render JSX表記
一、なぜJSXで書くのかJSXで書くのはrenderで書くよりhtml文法に近い.変数に遭遇したら{},{}で変数を書き、

<script type="text/jsx">
export default {
     
    data() {
     
        return {
     

        }
    },
    watch: {
     

    },
    components: {
     },
    render(h) {
     
        let tr = this.createHead(h);
        return (<table class="editTable__block" id="tb"><thead>{
     tr}</thead></table>)
    },
    props: {
     
        allRow: {
     
            type: Boolean,
            defaule: false
        }
    },
    methods: {
     
      sync (prop, value) {
     
        this[prop] = value
      },
      createHead() {
     
        let tr = [];
        let rowspan = 10;
        let width= 80;
        let height = 40;
        for(let i = 0; i < rowspan; i++) {
     
                if(i === 0) {
     
                    let cell = (<th style={
     {
     width: width + 'px', height: height + 'px'}} onclick={
     this.thClick()}> 11111 </th>)
                    tr.push(<tr>{
     cell}</tr>)
                } else {
     
                    tr.push(<tr></tr>)
                }
        }
        return tr;
      },
      thClick() {
     
          console.log('thClick!!!!')
      }


    }
}
</script>