React Props组件属性验证

ES6类

import React from 'react'
import PropTypes from 'prop-types'

class Summary extends React.Component {
    render() {
        const {ingredients, steps, title} = this.props;
        return (
            <div>
                <h1>{title}</h1>
                <p>
                    <span>{ingredients} Ingredients | </span>
                    <span>{steps}</span>
                </p>
            </div>
        )
    }
}

Summary.propTypes = {
    ingredients: PropTypes.number,
    steps: PropTypes.number,
    title: (props, propName) => {
        return (
            (typeof props[propName] !== 'string') ?
                new Error("A title must be a string") :
                (props[propName].length > 20) ?
                    new Error(`title is over 20 characters`) :
                    null

        )
    }
}

Summary.defaultProps = {
    ingredients: 0,
    steps: 0,
    title: "[recipe]"
}

export default Summary;

无状态组件

import React from 'react'
import PropTypes from 'prop-types'

const Summary = ({ ingredients = 0, steps = 0, title }) => {
    return (
        <div>
            <h1>{title}</h1>
            <p>{ingredients} Ingredients | {steps} Steps</p>
        </div>
    )
}

Summary.propTypes = {
    ingredients: PropTypes.number.isRequired,
    steps: PropTypes.number.isRequired
}

Summary.defaultProps = {
    ingredients: 1,
    steps: 1
}

export default Summary

ES6静态属性

import React from 'react'
import PropTypes from 'prop-types'

export default class Summary extends React.Component {

    static propTypes = {
        ingredients: PropTypes.number,
        steps: PropTypes.number,
        title: PropTypes.string
    }

    static defaultProps = {
        ingredients: 0,
        steps: 0,
        title: "[recipe]"
    }

    render() {
        const {ingredients, steps, title} = this.props;
        return (
            <div>
                <h1>{title}</h1>
                <p>
                    <span>{ingredients} Ingredients | </span>
                    <span>{steps} Steps</span>
                </p>
            </div>
        )
    }
}