526互联

React（九）：state的简写

发布时间 2023-07-30 15:31:30作者: 谁知道水烫不烫
<!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>