React之初始化state
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>state</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,操作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>
<!-- 此处一定要写babel -->
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
this.state={isHot:true}
}
render(){
const {isHot} =this.state;
console.log(this);
return <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'));
</script>
</body>
</html>
React之初始化state相关推荐
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- [react] react组件的state和props两者有什么区别？
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...
- React组件的State
React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...
- React中的state和props有什么区别？
本文翻译自:What is the difference between state and props in React? I was watching a Pluralsight course o ...
- React文档 state and lifecycle
状态和生命周期 这篇介绍 React 组件中状态和声明周期的概念.详情可以查看API参考 . 思考前一部分中时钟的例子.渲染元素中,我们仅学习了一种更新 UI 的方式.调用 ReactDOM.rend ...
- 讲讲React中的State和Props
基本概念 在React中,组件的数据存储在props和state中. 一个组件的显示形态可以由数据状态和外部参数所决定. 外部参数--props 组件从概念上可以理解为一个函数,因为函数也是封装一个独 ...
- react中的state、props、ref
state state顾名思义就是状态,它只是用来控制这个组件本身自己的状态,我们可以用state来完成对行为的控制.数据的更新.界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变 ...
- 使用React搭建初始化环境（React入门）
使用VSCode编辑器搭建React的基础使用环境(Visual Studio Code官方下载地址) 一.搭建React使用环境 1.检查是否安装React包 在任意位置打开命令窗口 输入命令: n ...
- 用react中的state写一个按钮+弹框的程序
题目:在页面上有一个按钮,点击按钮出现一个旋转的loading,提交按钮不可点击,等待一秒后弹框显示提交失败或者提交成功,接下来我们直接开始 在此之前,我相信您已经安装好了react运行环境,如何创建 ...
最新文章
- 细说进程、应用程序域与上下文之间的关系（一）——进程的概念与作用
- 大一新生开发的小工具火了！不一样的 Python 编程体验，还是可视化的那种
- JDK中这些常用方法也有Bug
- 如何让面试官认可你的简历
- nginx 学习笔记【持续更新...】
- 第十三章：位图（八）
- dll修复工具哪个好？靠谱dll修复助手
- 微pe怎么装linux系统,微PE工具箱增加安装Linux系统菜单
- 2015iMAC安装macOS/Win11双系统 外置硬盘安装macOS/Win11双系统(非PE非DP虚拟机非WTG)
- Http常用请求方法
- 冬季高校寝室用电安全管理与防范
- cpu是几核的怎么查看
- Linux涂鸦智能网关面板Turnkey方案
- 近期准备秋招的一些体会
- 《程序员升职记》0.简介
- 微信小程序和vue的区别？
- Jst知识点个人总结
- java程序员等级一览：
- 长安大学计算机基础,计算机基础知识-长安大学.PPT
- 工作中你应该掌握的 linux 命令大全