LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Silence20240313

2-React JSX基础 事件绑定 组件基础使用 useState 基础样式控制

Posted at

一：概念和本质

image.png

二：识别js表达式

image.png
image.png

三：实现列表渲染

使用map方法，循环哪个结构就return哪个结构
※：加上一个独一无二的key,字符串或者number(id)
item：表示遍历出来的每一项
image.png
image.png

四：实现基础条件渲染

通过双与控制单个元素的显示与隐藏
三元运算符：两个元素
image.png
image.png

五：实现复杂条件渲染

image.png
image.png

六：事件绑定

1.基础绑定

image.png
image.png

2.事件参数e

image.png
image.png

3.传递自定义参数

image.png
image.png

4.既要传递自定义参数，而且还要事件对象e

image.png
image.png

七：组件基础使用

image.png
image.png
image.png
image.png

八：useState基础使用

😊useState是用来给组件添加状态变量的
状态变量(count)会引起视图的变化,状态变量是多少，视图就是多少
方法的使用：导入--执行--返回数组（状态变量，修改方法）
image.png
image.png

九：useState修改状态的规则

使用新值替换老值，使用新对象替换老对象
image.png
image.png
image.png

十：基础样式控制

className √ class ×
image.png
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?