02 React基礎語法(2)

2022-06-29 12:51:09 字數 1076 閱讀 9538

一、條件渲染

語法:使用原生 js 的 if 或者 三元表示式 判斷

二、列表 & key

語法:

foreach 	遍歷陣列
map		修改陣列的資料,返回乙個【修改過】的陣列
filter  	過濾陣列的資料,返回乙個【新】的陣列
find    	找值
findindex   找下標
let newarr = arr.map((item,index)=> )

例子:

三、表單

① 受控元件

渲染表單的react元件還控制著使用者輸入過程中表單發生的操作

② 非受控元件

value值為唯讀的0

如:input type='file'

③ 資料雙向繫結

1. 繫結 value 值

2. change 事件觸發

3. 跟新模型資料

例子:

四、元件樣式

語法:① 外部引入

② 行內樣式

《標籤名 style= }>

注:react 中新增 class 通過 classname

22

五、ref標記

語法;

《標籤 ref="標識">
this.refs.標識   使用該語法獲取dom元素

六、元件通訊

① 父傳子

語法

父在呼叫子元件上傳遞資料
子通過this.props.鍵獲取資料

例子② 子傳父

語法

父定義普通方法接受資料
子呼叫普通方法傳遞資料

例子

③ 非父子

語法

父在呼叫n個子元件上傳遞資料(公共父)
子通過this.props.鍵獲取資料

例子

React筆記02 React中的元件

乙個網頁可以被拆分成若干小部分,每個部分都可以稱為元件,即元件是網頁中的一部分。元件中還可以有多個元件。乙個元件的構成 import react from react render 實際專案中用下方這種簡化寫法 import react,from react render 語法拆分理解 import...

go語言基礎語法02天 2

8,流程控制 前面我們寫的程式都是從第一行開始執行,一直執行到末尾,一行一行的順序執行下來,這種執行結構叫順序執行結構。go語言除了有順序結構,還有選擇結構,迴圈結構。順序結構 程式按順序執行,不發生跳轉。選擇結構 依據是否滿足條件,有選擇的執行相應功能。迴圈結構 依據條件是否滿足,迴圈多次執行某段...

python基礎語法02

if 條件 執行 if 條件 執行 1 條件為真時,做的事情 else 執行 2 條件為假時,做的事情 if 條件1 執行 elif 條件2 執行 elif 條件3 執行 else 條件n 執行 if 條件 if 條件 執行 else 執行 else 執行 完成 外賣結算 程式 要求 滿30減10塊...