在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方

v-html

使用domPropsInnerHTML来替代v-html

domPropsInnerHTML={this.topicDetail.content}

class="markdown-body"

>

loading...

v-if

使用三元操作符来替代v-if

{this.preFlag ? ...... : ""}

v-for

使用map遍历替代v-for

{this.pageBtnList.map(page => {

return (

onClick={this.changePageHandler.bind(this, page)}

class={[{ currentPage: page === this.currentPage }, "pageBtn"]}

>

{page}

);

})}

render

注意：在render函数中的组件名一定用kebab-case命名

protected render() {

return (

© 2020 Designed By Enoch Qin

码云笔记 >>

);

}

onClick事件传值(TSX)

使用template的时候，如果用v-on绑定事件，想要传参的话，可以直接这么写：

click me

但是在TSX中，如果直接这么写，就相当于立即执行了clickHandle函数：

render(){

// 这样写是不行的！！

return click me

}

因此，我们不得不使用bind()来绑定参数的形式传参：

render(){

return click me

}

结语

以上就是今天码云笔记为大家带来的关于在Vue中写TSX有哪些需要注意的地方，纯个人自学笔记，希望对大家有帮助。