React——props的使用以及propTypes

组件的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‘
}
时间: 2024-11-04 00:48:07

React——props的使用以及propTypes的相关文章

React组件属性部类(propTypes)校验

React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性.当向 props 传入无效数据时,JavaScript 控制台会抛出警告.注意为了性能考虑,只在开发环境验证 propTypes.下面用例子来说明不同验证器的区别: React.createClass({ propTypes: { // 可以声明 prop

react Props 验证 propTypes,

<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!-- 引入 React --><script src="src/libs/react.js"></script><!-- 引入 JSX 语法格式转换器 --><script src="src/libs/JSXTransformer.j

React组件属性类型(propTypes)

React.createClass({ propTypes: { // You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalN

React props

props的基本用法  实例中 name 属性通过 this.props.name 来获取. 通过 getDefaultProps() 方法为 props 设置默认值 总结:如果给props设置了默认值 又在React.render调用标签的时候 写上name=Runoob1  那么将优先执行后者 即name=Runoob1  没有设置值的时候才会执行默认值 需注意两点: 1.return 返回值要写在大括号里{} 2.render:function(){}方法中的返回值要指定标签 即把大括号写

react篇章-React Props

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 props 来传递数据. demo1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <scrip

react props与render成员函数

props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标签的属性值进行传递,并合并到组件实例对象的this.props中.事实上,组件接受静态信息的主要渠道就是props属性. 比如: var HelloBox = React.createClass({ render : function() { return <div>{'Hello'+this.p

React组件的防呆机制(propTypes)

Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向props传入无效数据是,JavaScript控制台会抛出错误.为了性能考虑,只在开发环境验证propsTypes. GroupSelect.defaultProps = {};GroupSelect.propTypes = { name: PropTypes.string, children: P

React(六)Props属性

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 props 来传递数据. (1)使用Props属性 class Mainextends React.Component { render() { return ( <div> <Name name={'yulingjia'} /> </div> ); } } class Name

React v15.5.0更新说明 &amp; v16.0.0更新预告

React今日发布了15.5.0版本,同时这也将是以15开头的最后一个版本,下一次发布,我们将迎来React 16.0.0 在15.5.0这一版本中,主要有以下两处改动: 独立React.PropTypes 在之前的版本之中,我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props,在15.5.0版本中,这一API被独立成了一个新的包 prop-types // 15.4 以前 import React from 'react'; class Compon