【react】利用prop-types库对传递的标签属性进行类型和必要性的限制

安装prop-types库

npm i prop-types

使用

// 父组件App.jsx
import React, { Component } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
// 在需要使用的页面引入
import PropTypes from 'prop-types'

export default class App extends Component {
  state = {
    todos: [
      {id: '001', name: '吃饭', done: true},
      {id: '002', name: '睡觉', done: true},
      {id: '003', name: '打代码', done: false},
      {id: '004', name: '逛街', done: false},
    ]
  }

  // addTodo用于添加一个todo，接受的参数是todo对象
  addTodo = (todoObj) => {
    console.log(todoObj, 'app')
    // 获取原todos
    const {todos} = this.state
    // 在todos的前面追加一个todo
    const newTodos = [todoObj, ...todos]
    // 更新状态，页面才会更新
    this.setState({todos: newTodos})
  }

  // updateTodo用于更新一个todo对象
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const {todos} = this.state
    const newTodos = todos.map(todoObj => {
      // 函数体
      if(todoObj.id === id) {
        return {...todoObj, done}
      }else {
        return todoObj
      }
    })
    this.setState({todos: newTodos})
  }

  render() {
    const {todos} = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          {/*给header组件传递addTodo*/}
          <Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo}/>
          <Footer/>
        </div>
      </div>
    )
  }
}

// 子组件Header.jsx
import React, {Component} from 'react';
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'

export default class Header extends Component {
  // 利用prop-types库对传递的标签属性进行类型以及必要性的限制
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  }

  handleKeyUp = (event) => {
    // keyCode是键盘上按键的标识
    const {keyCode, target} = event;
    // 13是回车键的标识，按下回车键，获取输入框的值
    if(keyCode !== 13) return
    // 添加的todo名不能为空
    if(target.value.trim() === '') {
      alert('输入不能为空')
      return
    }
    // 子组件给父组件传值
    const todoObj = {
      id: nanoid(),
      name: target.value,
      done: false,
    }
    this.props.addTodo(todoObj)
    // 清空输入值
    target.value = ''
  }
  render() {
    return (
      <div>
        <div className="todo-header">
          <input type="text" placeholder='请输入你的任务名称，按回车键确认' onKeyUp={this.handleKeyUp} />
        </div>
      </div>
    )
  }
}