react学习11-React 组件化—类表达式和点标记组件语法详解

最新推荐文章于 2022-08-26 17:35:33 发布

木蓝茶陌*_*

最新推荐文章于 2022-08-26 17:35:33 发布

阅读量258

点赞数

分类专栏： react 文章标签： react组件化类表达式点标记组件

本文链接：https://blog.csdn.net/jyn15159/article/details/115611825

版权

react 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

类表达式

类表达式是类的另外一种定义方式，类似于函数表达式。

类表达式：

let Person = class {
    constructor(uname, age) {
        this.uname = uname
        this.age = age
    }
}

let p = new Person ('zhangsan', 13)
console.log(p)

类表达式继承用法：

let Student = class extends Person {
    constructor(uname, age, score) {
        super(uname, age)
        this.score = score
    }
}

let stu = new Student('wangwu', 14, 100)
console.log(stu)

点标记组件语法

对象的属性值是类组件（类表达式）：

const Test = {
    Header: class extends React.Component {
        render () {
            return (
                <div>Header</div>
            )
        }
    },

    Main: class extends React.Component {
        render () {
            return (
                <div>Main</div>
            )
        }
    },

    Footer: class extends React.Component {
        render () {
            return (
                <div>Footer</div>
            )
        }
    }
}

class DotNotation extends React.Component {
  render () {
    return (
      <div>
        <h1>点标记组件的用法</h1>
        <hr/>
        <Test.Header></Test.Header>
        <Test.Main></Test.Main>
        <Test.Footer></Test.Footer>
      </div>
    )
  }
}