本节接着介绍如何通过ES6 Class(类)形式实现一个React类组件。下面看一个具体的代码实例:
【代码3-4】(详见源代码目录ch03-react-comp-class.html文件)
关于【代码3-4】的说明:
-
第18~22行代码定义了一个ES6 Class类(HelloReactComp),这个类就是我们要实现的React类组件,具体说明如下:
-
► 第18行代码通过class关键字定义了类名(HelloReactComp),并通过extends关键字声明该类继承自React.Component对象。
-
► 第19~21行代码通过React.Component对象的render()方法实现React类组件的渲染操作,具体渲染内容是第20行代码返回的JSX代码。
-
第24行代码中,通过const关键字定义了一个常量(eleHello),然后将ES6 Class类(HelloReactComp)的类名(HelloReactComp)使用尖括号“<>”包括起来,赋值给常量(eleHello),类似于将类名(HelloReactComp)作为标签名来使用。通过以上步骤的定义,ES6 Class类(HelloReactComp())就成为React类组件(<HelloReactComp>)。
-
第29行代码中,通过将常量(eleHello)放入JSX代码({eleHello})来实现React类组件的应用。
测试网页的效果如图3.2所示。
图3.2 React类组件
如图3.2中的箭头所示,页面中显示了通过React类组件渲染的效果,从效果来看与React函数组件功能相同。
另外注意一点,React组件的名称首字母必须是大写的。例如,<HelloReactComp>是正确的,而<helloReactComp>就是非法的。这个规定主要是为了与原生HTML标签名称相区别,因为原生HTML标签名称均是小写字母开头的。
O5nS/covam3vAxVkCj2WZYyteLP+wAyw6O/obGk9Nl2FCR5mm1+Lcy7KjFiy2TIF