上节课我们已经学习了如来完成一个todo，并不是像我们所说的那样直接在页面上勾选了checkbox就行了，而是要和state来挂钩。那么这节课我们来讲一讲对props的限制。

回顾

在开始这节课的内容之前我们来对上节课的内容来做一个简单的回顾

  • checkbox不能通过event.target.value拿勾选状态，应该用event.target.checked
  • state在哪，修改state的方法就在哪
  • 事件绑定一定得是一个函数

以上便是我们上节课的主要需要注意的要点，接下来，我们来进行这节课的内容。

为什么要限制

我们来看一下我们的代码

export default class App extends Component {

  state = { todos: [] };

  add = dataObj => {...};
  update = (id, done) => {...}

  render() {
    const { todos } = this.state;
    return (
      ...
          <List todos={todos} update={this.update} />
      ...
    )
  }
}

我们来看一个问题，我们是不是给List组件传东西了？这个传递方式是什么？是不是props？但是我们有给这个props做类型以及必要性的限制吗？没有吧，如果别人要用我们的组件，不知道要传的话是不是就会很麻烦？所以说我们来做一下限制。

安装

那么我们限制props是不是要借助我们的prop-types？但是脚手架并没有给我集成prop-types所以说我们要自己安装一下。那么打开命令行，执行npm install prop-types就可以了。但是一定要记得在我们项目的目录下执行才可以。否则的话就安装到别的地方去了。

限制

那么我们给List组件的props来加一点限制吧：

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

export default class List extends Component {

  static propTypes = {
    todos:PropTypes.array.isRequired,
    update:PropTypes.func.isRequired
  };

  render() {...}
}

我们来看一下代码，我们是不是给List组件传了两个东西？一个是todos是一个数组，而且必传，另一个是一个函数而且也必传。

那么我们加了类型和必要性的限制，那么我们来看一下效果如果我没有传update。

image-20220110115627951

这就出了错误警告说我们标记了update是一个必须项，但是现在我们得到的值却是undefined。

如果我们todos传的不是数组，而是一个对象的话，那么会怎么样？我们来想一想，我们是不是在List组件中用map方法加工了todos？那么对象有map方法吗？是不是会报错？我们再看一下效果：

image-20220110120101932

首先，是不是提醒我们todos是一个对象，但是我们要求的是数组。然后后面是关于对象使用map方法的一个报错。

以上便是对props的限制

总结

  • prop-types需要手动安装
  • prop-types不是必要的，但是加了可以更加规范，方便维护

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/todolist_limit_props/