<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>state的简写形式</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
</body>
<script type="text/babel">
//定义类组件
class MyComponent extends React.Component {
//在类内部以以下形式声明对象或者方法是直接在实例对象上存在，原型对象上不存在
state = {
isDog: true,
color: '黑色'
}
changeAnimal = () => {
const isDog = this.state.isDog
this.setState({isDog: !isDog})
}
render() {
console.log(this)
const { isDog, color } = this.state
return (
<div onClick={this.changeAnimal}>
<h1>
<span>这是一只{isDog ? '狗' : '猫'}，颜色是{color}</span>
</h1>
</div>
)
}
}
//react渲染
ReactDOM.render(<MyComponent />, document.getElementById("test"))
</script>
</html>
