React入门(三)父组件给子组件传递过来的值验证

本节知识点

(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比元素要提高性能