props

就是在調(diào)用組件的時(shí)候在組件中添加屬性傳到組件內(nèi)部去使用

? ? 每個(gè)組件都會(huì)有 props 屬性

? 組件標(biāo)簽的所有屬性都保存在 props

? 組件內(nèi)部不能改變外部傳進(jìn)來(lái)的 props 屬性值

接下來(lái)如果想對(duì)傳入的 props 屬性進(jìn)行一些必傳癞松、默認(rèn)值米同、類(lèi)型的校驗(yàn)拓售，就需要用到一個(gè) prop-types 庫(kù)

下載：npm i prop-types --save引入：import PropTypes from ‘prop-types’

例子

class Person extends React.Component{

//對(duì)標(biāo)簽屬性進(jìn)行類(lèi)型哪替、必要性的限制?

static propTypes = {? ?

name:PropTypes.string.isRequired,//限制name必傳结澄，且為字符串?

sex:PropTypes.string,//限制sex為字符串? ?

age:PropTypes.number,//限制age為數(shù)字?

speak:PropTypes.func,//限制speak為函數(shù)? }?

//指定默認(rèn)標(biāo)簽屬性值?

static defaultProps = {? ? sex:'男', //sex默認(rèn)值為男? ?

age:18 //age默認(rèn)值為18? }}

refs 屬性

字符串形式的 ref（這種方式已過(guò)時(shí)，不推薦使用，因?yàn)樾实停?/p>

refs 是組件實(shí)例對(duì)象中的屬性夫晌，它專(zhuān)門(mén)用來(lái)收集那些打了 ref 標(biāo)簽的 dom 元素

比方說(shuō)，組件中的 input 添加了一個(gè) ref=“input1”那么組件實(shí)例中的 refs 就 ={input1：input（真實(shí) dom）}

這樣就可以通過(guò) this.refs.input1 拿到 input 標(biāo)簽 dom 了就不需要想原生 js 那樣通過(guò)添加屬性 id昧诱，然后通過(guò) document.getElementById (“id”) 的方式拿回調(diào)函數(shù)class Demo extends React.Component{

? showData = () => {? ?

const {input1} = this? ?

alert(input1.value)?

}?

render(){? ?

return{? ?

<input ref={c => this.input1 = c}? type="text" />?

? ? <button onClick={this.showData}>

點(diǎn)我展示數(shù)據(jù)</button>?

}? }}

直接讓 ref 屬性 = 一個(gè)回調(diào)函數(shù)晓淀，為什么這里說(shuō)是回調(diào)函數(shù)呢？

因?yàn)檫@個(gè)函數(shù)是我們定義的盏档，但不是我們調(diào)用的

是 react 在執(zhí)行 render 的時(shí)候凶掰，看到 ref 屬性后跟的是函數(shù)，他幫我們調(diào)用了

然后把當(dāng)前 dom 標(biāo)簽當(dāng)成形參傳入

所以就相當(dāng)于把當(dāng)前節(jié)點(diǎn) dom 賦值給了 this.input1蜈亩，那這個(gè) this 指的是誰(shuí)呢懦窘？

不難理解，這里是箭頭函數(shù)勺拣，本身沒(méi)有 this 指向奶赠，所以這個(gè) this 得看外層的該函數(shù)外層是 render 函數(shù)體內(nèi)，所以 this 就是組件實(shí)例對(duì)象所以 ref={c=>this.input1=c}

意思就是給組件實(shí)例對(duì)象添加一個(gè) input1最后要取對(duì)應(yīng)節(jié)點(diǎn) dom 也直接從 this（組件實(shí)例中纫┯小）

createRef

createRef() 方法是 React 中的 API毅戈，它會(huì)返回一個(gè)容器，存放被 ref 標(biāo)記的節(jié)點(diǎn)愤惰，但該容器是專(zhuān)人專(zhuān)用的苇经，就是一個(gè)容器只能存放一個(gè)節(jié)點(diǎn)；

當(dāng) react 執(zhí)行到 div 中第一行時(shí)宦言，發(fā)現(xiàn) input 節(jié)點(diǎn)寫(xiě)了一個(gè) ref 屬性扇单，又發(fā)線(xiàn)在上面創(chuàng)建了 myRef 容器，所以它就會(huì)把當(dāng)前的節(jié)點(diǎn)存到組件實(shí)例的 myRef 容器中

注意：如果你只創(chuàng)建了一個(gè) ref 容器奠旺，但多個(gè)節(jié)點(diǎn)使用了同一個(gè) ref 容器蜘澜，則最后的會(huì)覆蓋掉前面的節(jié)點(diǎn)施流，所以，你通過(guò) this.ref 容器.current 拿到的那個(gè)節(jié)點(diǎn)是最后一個(gè)節(jié)點(diǎn)鄙信。class Demo extends React.Component{?

//React.createRef調(diào)用后可以返回一個(gè)容器瞪醋，該容器可以存儲(chǔ)被ref所標(biāo)示的節(jié)點(diǎn)，該容器是專(zhuān)人專(zhuān)用的?

myRef = React.createRef()? //展示輸入框的數(shù)據(jù)

showData = () => {? ?

alert(this.myRef.current.value)?

}? render(){?

return{? ?

<div>? ? ? <input ref={this.myRef}? type="text" />? ? ?

? <button onClick={this.showData}>點(diǎn)我展示數(shù)據(jù)</button>? ?

</div>? ?

}? }}