# 基于class关键字创建组件 Class组件称之为有状态组件。即组件的私有状态 。 ## 使用 class 关键字来创建组件 在学习的过程中先书写 如下代码，通过报错提示得知：在class创建的组件中，必须定义一个render函数 ``` class Hi extends React.Component{ } ``` 把render(){}函数书完完毕后，又会报错得知：在render函数中，必须返回一个null或者符合规范的虚拟DOM元素 ``` class Hi extends React.Component{ // 通过报错提示得知：在class创建的组件中，必须定义一个render函数 render(){ } } ``` 最终我们可以书写成以下的代码 ``` class Hi extends React.Component{ // 通过报错提示得知：在class创建的组件中，必须定义一个render函数 render(){ // 在render函数中，必须返回一个null或者符合规范的虚拟DOM元素 return <div> <h1>这是用 class 关键字创建的组件！</h1> </div>; } } ``` ## 组件通信-父向子传递数据 ### 演示学习 普通构造函数定义的子组件是通过形参书写props来接收父组件传递的数据。 class定义的子组件该如何接收父组件传递的数据？能直接按下面写代码？ ``` class Hi extends React.Component{ render(){ return <div> <h1>你好{props.name}年龄是{props.age}</h1> </div>; } } var obj = { name:'小白', age:16 } ReactDom.render(<Hi {...obj}/>,document.getElementById('root')) ``` 肯定是不可以按照上面的方式书写会报错。`Uncaught ReferenceError: props is not defined`props没有定义。 ### 正确思路 我们知道在学习Class类时候我们还有个constructor构造函数。这里面是可以传值的。 ~~~ class Hi extends React.Component{ constructor(props){ super(props); //super写在构造函数的第一行 } render() { return( <div>你好{this.props.name}年龄是{this.props.age} </div> ); } } ~~~ 在constructor中接收父组件传递的值。还要记得必须写super(props)因为组件是继承过来的 ## webstormJS模板 我们发现每次为了书写一个class组件，要写很多单词中，一不小心就会出错。我们可以去配置webstorm的模板。  ### 模板文件需要先拷贝 ``` import React,{Component} from 'react'; export default class $className$ extends Component{ constructor(props){ super(props); this.state = {} } render() { return ( <div>这是$name$$end$组件</div> ); } } ```      ### 使用 新建tabbar.js在文件中书写react会立即生成我们想要的Class组件。