PropsType的使用

自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。需要自己手动下载npm install --save prop-types

import React from "react";
import ReactDOM from "react-dom";
import PropsType from "prop-types";

class Demo extends React.Component {
  render() {
    let { name, age, love } = this.props;
    return (
      <ul>
        <li>name: {name}</li>
        <li>age: {age}</li>
        <li>
          love: <ul>
            {love.map((item, index) => {
              return <li key={index}> {item} </li>
            })}
          </ul>
        </li>
      </ul>
    );
  }
}
Demo.propTypes = {
  // 数据类型为字符串并且必须填
  name: PropsType.string.isRequired,
  // 数据类型为数字
  age: PropsType.number,
  // 数据类型为数组
  love: PropsType.array
};
//设置props的默认值
Demo.defaultProps = {
  love: ["无欲无求"]
}

let person = { name: "丹丹", age: 20, love: ["草莓", "西瓜"] };
ReactDOM.render(<Demo {...person}></Demo>, document.getElementById("root"));

最周全的propsType讲解请移步👉官方propsType讲解