React 组件的三大核心属性之 state 在类式组件中的基本使用 

<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 支持react操作DOM -->
    <script type="text/javascript" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 将jsx转为js -->
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <!-- 对组件标签属性进行限制, React v15.5之后，React.PropTypes 移入此包 -->
    <script type="text/javascript" src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

</head>
<body>
<div id="root"></div>

<script type="text/babel">

    //******类式组件定义******
    class ClassComponent extends React.Component {

        //初始化状态
        state = {isTemp: false, temp2: 'bbb'}
        
		//自定义方法 --- 要用赋值语句的形式+箭头函数
        changeTemp = () => {
            const isTemp = this.state.isTemp
            //改变 state 一定要用 setState，并且是为合并操作
            this.setState({isTemp: !isTemp})
        }

        render() {
            const {isTemp, temp2} = this.state
            return <h1 onClick={this.changeTemp}>类式组件, val: {isTemp ? 'T' : 'F'}，{temp2}</h1>
        }
    }

    //1.创建虚拟DOM
    const vDOM = <div>
        <ClassComponent/>
    </div>;
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vDOM, document.getElementById("root"));
</script>
</body>
posted @ 2022-03-07 18:03  叕叕666  阅读(39)  评论(0)    收藏  举报