1.PropTypes简单使用
在Xiaojiejie.js
组件里传递了4个值,有字符串,有数字,有方法,这些都是可以使用PropTypes
限制的。在使用需要先引入PropTypes
。
import PropTypes from 'prop-types'
引入后,就可以在组件的下方进行引用了,需要注意的是子组件的最下面(不是类里边)。
//校验传递值
SmailSmailGirlItem.propTypes = {
//content:'默认值'
content: PropTypes.string,
index: PropTypes.number.isRequired, //isRequired 必传,不传会报错
deleteItem: PropTypes.func
}
2.ref的使用方法
2.1.代替原来的e.target.value
以前的案例中,我们写了下面的代码,使用了e.target
,这并不直观,也不好看。这种情况我们可以使用ref
来进行解决。
inputChange(e){
this.setState({
inputValue:e.target.value
})
}
如果要使用ref
来进行,需要现在JSX
中进行绑定, 绑定时最好使用ES6语法中的箭头函数,这样可以简洁明了的绑定DOM元素。
<input
value={this.state.inputValue}
onChange={this.inputChange.bind(this)}
//关键代码——----------start
ref={(input)=>{this.input=input}}
//关键代码------------end
/>
绑定后可以把上边的类改写成如下代码:
inputChange(){
this.setState({
inputValue:this.input.value
})
}
这就使我们的代码变得语义化和优雅的多。但是就我个人的经验来讲,我是不建议用ref
这样操作的,因为React
的是数据驱动的,所以用ref会出现各种问题。
2.2.ref
使用中的坑
比如现在我们要用ref绑定取得要服务的数量,可以先用ref
进行绑定。
<ul ref={(ul)=>{this.ul=ul}}>
{
this.state.list.map((item,index)=>{
return (
<SmailSmailGirl
key={index+item}
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)}
/>
)
})
}
</ul>
绑定后可以在addList()
方法中,获取当前<div>
的值.
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
//关键代码--------------start
console.log(this.ul.querySelectorAll('div').length)
//关键代码--------------end
}
这时候你打开控制台,点击添加服务按钮,你会返现数量怎么少一个?(就是这个坑),其实这个坑是因为React中更多setState
是一个异步函数所造成的。也就是这个setState
,代码执行是有一个时间的,如果你真的想了解清楚,你需要对什么是虚拟DOM有一个了解。简单的说,就是因为是异步,还没等虚拟Dom渲染,我们的console.log
就已经执行了。
那这个代码怎么编写才会完全正常那,其实setState
方法提供了一个回调函数,也就是它的第二个函数。下面这样写就可以实现我们想要的方法了。
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
//关键代码--------------start
},()=>{
console.log(this.ul.querySelectorAll('div').length)
})
//关键代码--------------end
}
现在到浏览器中查看代码,就完全正常了。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!