React——props的使用以及propTypes

Posted 2020-10-08 QxQstar

组件的props是只读的，组件不能修改自己的props，在React中，组件可以接受任意的props，如函数，对象，基本类型以及react元素

一.props的使用

1.一些组件并不需要知道自己的children，尤其是像Sidebar和Dialog这通用‘boxes‘的组件。在这些组件中，我们推荐使用特别的children props直接将孩子元素传递到组件中。

 

function FancyBorder(props){
    return(
        <div>
            {props.children}
        </div>
    )
}
function WelcomeDialog(props){
    return <FancyBorder>
            <h1>Welcome</h1>
            <p>Thank you for visiting our spacecraft!</p>
        </FancyBorder>
}

 

 在<FancyBorder>中的任何tag都将作为children props传递到FancyBorder组件中

2.你除了可以通过children props直接向组件中传递子元素，你也可以按照你自己的习惯，而不是使用children

function FancyBorder(props){
    return <div>
        {props.top}
        {props.bottom}
    </div>
}
function WelcomeDialog(props){
    return <FancyBorder top={<Top/>} bottom={<Bottom/>} />
}
function Top(props){
    return <p> I am top</p>
}
function Bottom(props){
    return <p>I am bottom</p>
}

 因为React元素(如：<Top>,<Bottom>)只是对象，所以可以将它们作为props传递到其他组件中

3.在某些情况下可能需要基于一个普通的组件创建出一个特别的组件。如通过Dialog组件创建出WelcomeDialog组件。在这里我们可以通过配置Dialog组件的props创建出特别的
WelcomeDialog组件。

 

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

 

二.propTypes

从React15.5起，React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。

import PropTypes from ‘prop-types‘

PropTypes暴露了一系列能够确定接受的props是否合法的验证器，出于性能的考虑，PropTypes在开发模式下才会起作用

 

import PropTypes from ‘prop-types‘
    class Greeting extends React.Component{
        render(){
            return <div>welcome,{this.props.name}</div>
        }
    }
    Greeting.propTypes = {
        name:PropTypes.string
    }

 

 prop-types提供了大量的验证器，举例如下：

import PropTypes from ‘prop-types‘
myComponent.propTypes = {
    // 数组
  optionalArray: PropTypes.array,
  // 布尔值
  optionalBool: PropTypes.bool,
  // 函数
  optionalFunc: PropTypes.func,
  // 数值
  optionalNumber: PropTypes.number,
  // 对象
  optionalObject: PropTypes.object,
  // 字符串
  optionalString: PropTypes.string,
  // symbol
  optionalSymbol: PropTypes.symbol,
  // 能够被渲染的数值，字符串，元素或者包含这些类型的数组
  optionalNode: PropTypes.node,
  // React元素
  optionalElement: PropTypes.element,
  // optionalMessage是Message类的实例
  optionalMessage: PropTypes.instanceOf(Message),
  // optionalEnum为[‘News‘, ‘Photos‘]中的其中一个
  optionalEnum: PropTypes.oneOf([‘News‘, ‘Photos‘]),
  //optionalUnion要么为字符串，要么为数值，要么为Message实例
  optionalUnion: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
    ]),
  // optionalArrayOf是数值类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  // optionalObjectOf的属性是数值
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  // requiredFunc是函数，且必须提供。isRequired可以链接到任何值后面
  requiredFunc: PropTypes.func.isRequired,
  // requiredAny可以是任何类型，且必须提供
  requiredAny: PropTypes.any.isRequired,
  // 自定义验证器。customProp中必须包含matchme
  customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error(
          ‘Invalid prop `‘ + propName + ‘` supplied to‘ +
          ‘ `‘ + componentName + ‘`. Validation failed.‘
        );
      }
  },
  // 自定义数组，对象类型的验证器
  // 验证器会调用数组或者对象中的每一个值
  // customArrayProp中的每一个值都要包含matchme
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
    return new Error(
      ‘Invalid prop `‘ + propFullName + ‘` supplied to‘ +
      ‘ `‘ + componentName + ‘`. Validation failed.‘
    );
    }
  })
}

 给props指定默认值

通过组件的defaultProps属性可以给组件的props指定默认值

import PropTypes from ‘prop-types‘
class Greeting extends React.Component{
    render(){
        return <div>welcome,{this.props.name}</div>
    }
}
Greeting.defaultProps = {
    name:‘lili‘
}