浅谈es6+react

来源：互联网发布：js实现百度热搜新闻词编辑：程序博客网时间：2024/05/22 06:26

// es6 书写react
import React, {Component } from'react';
// 或者 import React from 'react';

// 组件是这样写的 class Main extends React.Component{ } 两种写法
class Mainextends Component {
// 初始状态值
constructor(props) {
super(props);
this.state = {
/*
这里面写es5里面的初始状态
*/
value1:'初始value1值',
value2:'初始value2值'
}
}
//生命周期的写法举例
componentWillMount(){

}

//点击事件的写法
handeleClick = () => {
this.setState({
value1:'改变值'
})
}

// es6的箭头函数
renderNewContent = () => {
return (
<div>
写一些你想写的组件
</div>
)
}

render (){
const { value1,value2 } = this.state;//es6语法
return (
<div>
<span>{value1}</span>
<span>{value2}</span>
{/*es6字符串拼接*/}
<span>{`字符串${value1}拼接`}</span>
<span onClick={this.handeleClick}>点击</span>
{/*渲染组件*/}
{this.renderNewContent}
</div>
)
}
}

阅读全文

0 0