React中创建组件
第2种 - 创建组件的方式
使用 class 关键字来创建组件ES6 中 class 关键字,是实现面向对象编程的新形式了解ES6中 class 关键字的使用
class 中constructor
的基本使用实例属性和实例方法静态属性和静态方法使用 extends
关键字实现继承
// 语法:
class 子类 extends 父类 {}
基于class关键字创建组件
最基本的组件结构:class 组件名称 extends React.Component {render(){return <div>这是 class 创建的组件</div>}
在 class 关键字创建的组件中,如果想使用 外界传递过来的 props 参数,不需接收,直接通过 this.props.*** 访问即可注意:在 class 组件内部,this 表示 当前组件的实例对象不论是 class 还是普通 function 创建的组件,它们的 props 都是只读的;eg:
import React from 'react'
import ReactDom from 'react-dom'const myH3 = <h3>独自走在繁华的都市,擦身而过的是熙熙攘攘的人群。路灯拉长孤独的身影,热闹都是旁人的,你总是一个人...</h3>;// class关键字创建组件
class Item extends React.Component {//render函数的作用,是渲染当前组件所对应的虚拟DOM元素render() {return <div><h3>活着就应该听听甜甜的歌, 听听甜甜的故事, 变成甜甜的人</h3><h3>{this.props.name}-----{this.props.age}------{this.props.gender}</h3></div>}
}const dog = {name: '大黄',age: '3',gender: '雄'
};// 调用render函数渲染虚拟DOM元素
ReactDom.render(<div>{myH3}<Item name={dog.name} age={dog.age} gender={dog.gender}/><Item {...dog} />
</div>, document.getElementById('app'));
更多推荐
组件,React
发布评论