React高级-PropTypes校验传递值及ref的使用

旧城等待， 2022-12-13 04:13 153阅读 0赞

#### 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
    }

现在到浏览器中查看代码，就完全正常了。

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/09/30%20React%E9%AB%98%E7%BA%A7-PropTypes%E6%A0%A1%E9%AA%8C%E4%BC%A0%E9%80%92%E5%80%BC%E5%8F%8Aref%E7%9A%84%E4%BD%BF%E7%94%A8/
[Link 1]: https://github.com/kay-520/React_study