灵心如玉,守一生无惧|

SadicZhou

园龄:3年2个月粉丝:7关注:4

React学习笔记05-类组件

ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,
ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码
复制代码
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<h1>欢迎进入React的世界</h1>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
复制代码
es6 class 组件其实就是一个构造器,每次使用组件都相当于在实例化组件,像这样:
复制代码
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const app = new App({
name: 'react'
}).render()
ReactDOM.render(
app,
document.getElementById('root')
)
复制代码

一定要让组件的类继承react.Component类,这样当你使用<App/>时react会帮助你完成组件的实例化

需要注意的是,一个render函数的返回值里面只能有一个根标签

复制代码
import React from "react";
class App extends React.Component {
    render() {
        return <div>"hello React Component"</div>
          /*   <div>hello react</div> 
        
            只能有一个根标签

        */
      
    }
}
复制代码

 

本文作者:SadicZhou

本文链接:https://www.cnblogs.com/SadicZhou/p/17774107.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   SadicZhou  阅读(29)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 尚好的青春 孙燕姿
  2. 2 孙燕姿
  3. 3 克卜勒 孙燕姿
- 孙燕姿
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.