react基礎知識2

在react的事件處理程式中，內部的this是指向undefined

// 解決方案1：通過this.clickfn.bind(this)

// 解決方案2：屬性初始化器語法, 提供了乙個箭頭函式

// 解決方案3：在函式外麵包一層箭頭函式 onclick=

// onclick=}

class event extends react.component 
// 可以在建構函式中，去處理事件處理函式的this問題
// this.clickfn = this.clickfn.bind(this)
}  render() 
}>
點我修改msg
)}  clickfn() )
}}

傳參的問題：
// 傳參第一種： 通過bind的方式進行傳參，還想要獲取事件物件, 事件物件是最後乙個引數
// 引數第二種： 通過給事件處理程式包裹乙個箭頭函式
// 在註冊事件的時候，能夠傳遞引數
class event extends react.component 
render() 
// 傳參第一種： 通過bind的方式進行傳參，還想要獲取事件物件, 事件物件是最後乙個引數
// 引數第二種： 通過給事件處理程式包裹乙個箭頭函式
clickfn(id) 
}

function greeting(props) 
return ;
}reactdom.render(
// try changing to isloggedin=:
,  document.getelementbyid('root')
);

條件渲染——元素變數

class score extends react.component 
}  render()  else if (this.state.score >= 80)  else if (this.state.score >= 70)  else if (this.state.score >= 60)  else 
return (
你本次的成績是
)}}

constructor(props) 
}  render() 中直接書寫任意的js表示式 */}
*/})
}}阻止元件渲染：

在極少數情況下，你可能希望能隱藏元件，即使它已經被其他元件渲染。若要完成此操作，你可以讓render方法直接返回null，而不進行任何渲染。

class list extends react.component ,,]
}}  render() 
))return (
中遍歷 */})}}
// react中無論是條件渲染或者是列表渲染，都在js

react中設定樣式，有兩種方式:

// 1. 給元素新增乙個classname, 設定乙個類樣式

// 2. 給元素新增乙個style屬性，通過style屬性設定行內樣式

// 在使用style給元素設定樣式的時候，style=

//react中設定樣式，有兩種方式
// 1. 給元素新增乙個classname, 設定乙個類樣式
// 2. 給元素新增乙個style屬性，通過style屬性設定行內樣式
// 在使用style給元素設定樣式的時候，style=
class comment extends react.component ,,,
],bgcolor: 'pink'
}}  render() 
}function item(props) 
return (
)}

react操作表單的元素，操作表單的目的： 獲取到使用者輸入的內容
// react操作表單： 受控元件  非受控元件
受控元件：
// 受控元件： 在當前元件中的表單元素受到了react的控制，
//1. 當表單元素的內容發生改變，react對應的狀態也要發生改變
//2. 當react對應的狀態發生改變，表單元素的內容也要發生改變。
class form extends react.component 
}  render() 
handlechange = e => )
}}

class form extends react.component 
}  render() 
handlechange = e => 
}

非受控元件：

// 1. 在建構函式中，需要自己建立乙個引用  ref
class form extends react.component 
render() 
獲取value值
)}  get = () => 
}

父到子：
class father extends react.component 
}  render() 
}// 需求： 在子元件中如何使用父元件的資料
// 1. 父元件通過自定義的屬性把值傳遞給子元件
// 2. 子元件通過props屬性可以獲取到所有父元件傳遞過來的資料
class son extends react.component 
render()  ----
)}}
子到父：

class father extends react.component 
)}  //1： 父元件提供乙個方法
getdata(msg) 
}class son extends react.component 
}  render() 
給父元件傳遞資料
)}  senddata = () =>  = this.props
getdata(this.state.msg)
}}

狀態提公升：

// 對於多個元件需要共享的資料，應該把這個資料存放到他們公共的父元件中。狀態提公升

// 始終保持資料是單向資料流。

class modal extends react.component  = this.props
// 通過props.children就能夠獲取到元件的子元素
return ()}}
// vue 中 slot插槽
reactdom.render(
你是否要退出本系統？
這是乙個提示的訊息
,)

傳送axios請求：

render()

clickfn = async () =>

add = async () => )

console.log(res)

}}傳送fetch請求:

render()

getall = () => )

.then(data => )

} getinfo = async () =>

add = async () => ,

body: json.stringify()

})let data = await res.json()

console.log(data)

}}

React 基礎知識介紹

react 基礎知識介紹另外，本教程的將全部使用 es6 語法，教程中我會介紹一些用到的 es6 語法，但是不會從頭講解了，推薦閱讀es6入門 hello world 以下是乙個最簡單的demo，將乙個最簡單的元件渲染到頁面上。import react from react import fro...

react 學習基礎知識

三種改變this指向的方法 1.在呼叫的時候使用bind方法 onclick 2.在constructor裡面改變this指向 this.getdata this.getdata.bind this 3.在方法上使用箭頭函式 getdata 兩種雙向繫結的方法 1.根據當前的元素自身的value值 ...

React基礎知識（5） React Props

state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與使用者互動來改變。這就是為什麼有些容器元件需要定義 state 來更新和修改資料。而子元件只能通過 props 來傳遞資料。一使用 props 以下例項演示了如何在元件中使用 props import r...

react基礎知識2

React 基礎知識介紹

react 學習基礎知識

React基礎知識（5） React Props

相關推薦