<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>
04-10
1234
1234
01-18
1420
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
