本節(jié)知識(shí)點(diǎn)
(1) props驗(yàn)證
(2) defaultProps 默認(rèn)屬性
Props驗(yàn)證
props 驗(yàn)證必須要引入props
import PropTypes from 'prop-types';
然后在組件即將暴露之前寫(xiě)驗(yàn)證規(guī)則
list.propTypes = {
content: PropTypes.string, // 類(lèi)型是字符串
deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //類(lèi)型是方法或者數(shù)字
index: PropTypes.number.isRequired // 類(lèi)型是number 而且必須是必填的
}
// 默認(rèn)數(shù)據(jù)
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, // 類(lèi)型是字符串
deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //類(lèi)型是方法或者數(shù)字
index: PropTypes.number.isRequired // 類(lèi)型是number 而且必須是必填的
}
// 默認(rèn)數(shù)據(jù)
list.defaultProps = {
test: 'Hello.world'
}
export default list
備注 虛擬節(jié)點(diǎn)問(wèn)題
虛擬DOM 本質(zhì)上就是一個(gè)js對(duì)象。
['div',{id:'abc'},['span',{class:"haha"}]]
這樣生成一個(gè)虛擬DOM比元素要提高性能
