函数式组件props的常用设置

设置是否必传和类型

安装插件

npm install prop-types

设置对应属性的默认值

import React from "react"
import propTypes from "prop-types"

export default function Func1(props) {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  )
}

// 设置props的属性的值的类型和是否必传
Func1.propTypes = {
  title: propTypes.string.isRequired,  //类型字符串 必传
  desc:propTypes.string  // 字符串，不必传
}

Func1.defaultProps = {
  title: "标题"   // 设置对应属性的默认值
}

设置对应属性是否必传

import React from "react"
import propTypes from "prop-types"

// 设置对应属性的默认值的第二种方式 推荐
export default function Func1({title="标题"}) {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  )
}

// 设置props的属性的值的类型和是否必传
Func1.propTypes = {
  title: propTypes.string.isRequired,  //类型字符串 必传
  desc:propTypes.string  // 字符串，不必传
}