实现点击h1标签可以切换天气的功能
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 准备好一个容器，用于挂载虚拟DOM -->
<div id="hello"></div>
<!-- 引入React核心库 -->
<script type="text/javascript" src="js/react.development.js"></script>
<!-- 引入react-dom，用于支持React操作DOM -->
<script type="text/javascript" src="js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="js/babel.min.js"></script>
<!-- 这里一定要写text/babel -->
<script type="text/babel">
//1. 创建一个组件
class Weather extends React.Component{
//构造器
// constructor(props){
// //初始化状态，必须调用super，不然报错
// super(props)
// this.state={flag:false}
// this.changeWeather=this.changeWeather.bind(this)
// }
//初始化状态
state={flag:false}
//render调用了几次
render(){
const {flag}=this.state; //读取状态
return <h1 onClick={this.changeWeather}>今天天气真{flag?'寒冷':'炎热'}</h1>
}
//自定义方法--使用赋值语句的形式+箭头函数
//changeWeather 调用几次 -- 点几次调几次
changeWeather = () => {
const flag=this.state.flag;//获取原来的isHot值
this.setState({flag:!flag}) //严重注意：状态必须通过setState进行更新,且更新是一种合并,不是替换
}
}
//2. 渲染虚拟DOM到
ReactDOM.render(<Weather />,document.getElementById('hello'));
</script>
</body>
</html>
运行结果如下：
image.png
点击“炎热”
image.png
