<div id="test"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入 babel, 用于将 jsx 转为 js -->
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 此处一定要写 babel -->
<script type="text/babel">
class Weather extends React.Component {
// 初始化状态
state = {isHot: false}
render() {
return <h2 onClick={this.changeWeather}>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
}
// 自定义方法，要用赋值语句的形式 + 箭头函数（日常开发中常使用这种方式）
changeWeather = () => {
const isHot = this.state.isHot
this.setState({isHot: !isHot})
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>
react state的简写形式
geekymv 发表于：2024-08-19 22:19:00 阅读数：363
