在Vue中写TSX有哪些需要注意的地方

v-html

使用domPropsInnerHTML来替代v-html

<main
    domPropsInnerHTML={this.topicDetail.content}
    class="markdown-body"
>
    loading...
</main>

v-if

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

 {this.preFlag ? <button class="pageBtn">......</button> : ""}

v-for

使用map遍历替代v-for

{this.pageBtnList.map(page => {
  return (
    <button
      onClick={this.changePageHandler.bind(this, page)}
      class={[{ currentPage: page === this.currentPage }, "pageBtn"]}
    >
      {page}
    </button>
  );
})}

render

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

protected render() {
  return (
    <footer>
      <hello-word />
      <p>
        &copy; 2020 Designed By Enoch Qin
        <a href="https://mybj123.com/" target="_blank">
          码云笔记 >>
        </a>
      </p>
    </footer>   
  );
}

onClick事件传值(TSX)

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

<button @click="clickHandle(params)">click me</button>

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

render(){
  // 这样写是不行的!!
  return <button onClick={this.clickHandler(params)}>click me</button>
}

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

render(){
  return <button onClick={this.clickHandler.bind(this, params)}>click me</button>
}

结语

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 在Vue中写TSX有哪些需要注意的地方

发表评论