React 复杂组件定义

最新推荐文章于 2022-10-19 17:54:51 发布

Tom098

最新推荐文章于 2022-10-19 17:54:51 发布

阅读量138

点赞数

分类专栏：前端文章标签： react 复杂组件定义

本文链接：https://blog.csdn.net/Tom098/article/details/118892503

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
        //真正开发中创建组件的写法： (a)没有构造函数 (b) 组件中自定义函数采用箭头函数赋给类变量 
        //形式，箭头函数中this不是动态的，而是在对象创建时就确定好的，即对象本身，所以不需要在构 
        //造函数中调用bind
        //
		//1.创建组件
		class Weather extends React.Component{
			//初始化状态
			state = {isHot:false,wind:'微风'}

			render(){
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//自定义方法————要用赋值语句的形式+箭头函数
            //这里如果不使用箭头函数，而是用changeWeather = function(){}的形式，还是会存在
            //this指向丢失的问题，所以必须用箭头函数
			changeWeather = ()=>{
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))
				
	</script>
</body>
</html>