react小demo----烧水（函数与jsx结合）

最新推荐文章于 2022-06-24 18:45:00 发布

原创最新推荐文章于 2022-06-24 18:45:00 发布 · 330 阅读

1 ·

CC 4.0 BY-SA版权

前端框架专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用React实现的动态水温状态显示组件。该组件通过改变输入的水温值，实时显示水的状态（结冰、加热或沸腾），并采用函数组件与类组件相结合的方式进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react--父子组件通信</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='babel.min.js'></script>
</head>
<body>
	<div id='example'></div>
	<script type='text/babel'>
		/*利用函数写一个烧水的demo*/
		/*需求：当小于0度，显示水结冰了
				大于80度，显示水烧开了
				其余显示正在加热中*/
		/*定义一个函数用来判断返回结果*/
		function show(now,max,min){
			var now = Number(now);
			var max = Number(max);
			var min = Number(min);
			if(now>max){
				return '水烧开了！';
			}else if(now<min){
				return '水结冰了！';
			}else{
				return '正在加热中！';
			}
		}
		class Cwater extends React.Component{
			constructor(){
				super();
				/*初始化一个状态来存储水的温度*/
				this.state = {
					wd:-2
				}
			}
			change(e){
				/*更新水温*/
				this.setState({
					wd:e.target.value
				});
			}
			render(){
				return (
					<div>
						<input type="number" defaultValue={this.state.wd} onChange={this.change.bind(this)}/>
						<h3>{show(this.state.wd,this.props.max,this.props.min)}</h3>
					</div>
				);
				
			}
		}
		ReactDOM.render(
			<Cwater max='80' min='0'/>,
			document.getElementById('example')

		);
			
		
	</script>
</body>
</html>