React PropTypes与DefaultProps的应用

一、安装 PropTypes 插件

yarn add     prop-types      速度快

或者

npm install   prop-types    速度慢

二、PropTypes 与 DefaultProps用法

PropTypes 

//设置传递的属性类型
TodoItem.propTypes ={
  content:PropTypes.string.isRequired,
  test:PropTypes.number.isRequired,
  deleteItem:PropTypes.func,
  index:PropTypes.number.isRequired
}

DefaultProps

//设置默认值
TodoItem.defaultProps={
  test:'222222'
}

三、通过例子测试

TodoList

import React,{ Component } from 'react';
import TodoItem from "@/components/TodoItem";

//Fragment 隐藏外层标签
class TodoList extends Component{
  //调用父类Component的构造函数,固定写法。
  constructor(props){
    super(props);
    //创建数据
    this.state={
      inputValue:'',
      list:['学习React','学习前端']

    }
  }
  render() {
    return (
      <div >
        {/*jsx语法，有提示。bind 改变this指向为调用的函数 */}
        <input onChange={this.handleInputChange.bind(this)} value={this.state.inputValue}/>
        <button onClick={this.handleBtnClick.bind(this)}>提交</button>

        <ul>
          {
            // 循环输出list
            this.state.list.map((item,index)=>{
              return (
                <div key={index}>
                  {/*组件内容传递*/}
                    <TodoItem  content={item} index={index} deleteItem={this.handleItemDelete.bind(this)}/>
                  {/*<li onClick={this.handleItemDelete.bind(this,index)} key={index}>*/}
                  {/*{item}*/}
                  {/*</li>*/}
                </div>

              )
            })
          }
        </ul>

      </div>

    )
  }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //添加
  handleBtnClick(){
    this.setState({
      //展开运算符，拿到以前数组的内容，生成新的数组。
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  //删除 index为下标
  handleItemDelete(index){
    const list=[...this.state.list];
    //删除一个下标为index的值
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default  TodoList;

TodoItem

import React,{ Component } from 'react';
import PropTypes from 'prop-types';




class TodoItem extends Component{
constructor(props){
  super(props);
  //父组件没有传值，为默认值。
  const{test} =this.props;
  this.handleClick=this.handleClick.bind(this);
}
  render() {
    console.log('test')
    return (

      <div onClick={this.handleClick}>

        {this.props.test} -  {this.props.content}

      </div>

    )
  }
  handleClick(){
    this.props.deleteItem(this.props.index)
  }

}
//设置传递的属性类型
TodoItem.propTypes ={
  content:PropTypes.string.isRequired,
  test:PropTypes.number.isRequired,
  deleteItem:PropTypes.func,
  index:PropTypes.number.isRequired
}
//设置默认值
TodoItem.defaultProps={
  test:'222222'
}


export default  TodoItem;

show

import React from 'react';
import TodoList from '../components/TodoList';




export default function() {

  return (
    <div>
    <TodoList></TodoList>
    </div>
  );
}

测试结果

当this.props为空时默认值为 222222，且会自动效验类型。