state的简写方式

<!DOCTYPE html>

<html>

<head>

<title>state的简写方式</title>

</head>

<body>

//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 = ()=> {

const isHot=this.state.isHot

this.setState({isHot:!isHot})

}

//2.渲染组件到页面

ReactDOM.render(<Weather />, document.getElementById('test'));

</script>

</body>

</html>

state的简写方式相关推荐

前端学习（3121）：react-hello-react的state的简写方式
React之props的简写方式和报错示范
1.修改name值,这里可以直接改 1)这样写报错,因为props是只读的 2.修改age值 1)这样写没问题,age+1 2)这样写报错,因为props是只读的 3.简写,将这两个放入clas ...
1.22 Lambda表达式的3种简写方式
使用 Lambda 表达式是为了简化程序代码,Lambda 表达式本身也提供了多种简化形式,这些简化形式虽然简化了代码,但客观上使得代码可读性变差.本节介绍 Lambda 表达式的几种简化形式. 省略 ...
前端学习（3220）：props的简写方式
react-state状态
react属性-state状态一对state的理解(20) 需要理解的概念有: 人->状态->行为与组件->状态->驱动视图之间的比较理解通过查看this,确认实例对象的 ...
b站React禹哥版视频笔记-React面向组件编程（上）
目录前言一.开发者工具的安装二.函数式组件三.复习类相关知识四.类式组件五.组件实例的三大核心属性1:state 1.对state的理解 2.初始化state 3.react中的事件绑定 ...
React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例目的巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
Vuex 之一：3种拿到 state 中数据的方式与实例剖析
Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据 ...
reactjs组件实例的三大属性之state属性使用示例
默认写法 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

state的简写方式

state的简写方式相关推荐

最新文章

热门文章