本节知识点
(1) props验证
(2) defaultProps 默认属性
Props验证
props 验证必须要引入props
import PropTypes from 'prop-types';
然后在组件即将暴露之前写验证规则
list.propTypes = {
content: PropTypes.string, // 类型是字符串
deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //类型是方法或者数字
index: PropTypes.number.isRequired // 类型是number 而且必须是必填的
}
// 默认数据
list.defaultProps = {
test: 'Hello.world'
}
全部代码
import React, { Component } from 'react'
import PropTypes from 'prop-types';
class list extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return <div onClick={this.deleteone.bind(this)}>{this.props.content}</div>
}
deleteone() {
let value = this.props.index
console.log(value)
this.props.deletedate(value)
}
}
list.propTypes = {
content: PropTypes.string, // 类型是字符串
deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //类型是方法或者数字
index: PropTypes.number.isRequired // 类型是number 而且必须是必填的
}
// 默认数据
list.defaultProps = {
test: 'Hello.world'
}
export default list
备注 虚拟节点问题
虚拟DOM 本质上就是一个js对象。
['div',{id:'abc'},['span',{class:"haha"}]]
这样生成一个虚拟DOM比元素要提高性能
