PropTypes React : Autoriser différents types de PropTypes pour un même objet

Question

J'ai un composant qui reçoit un accessoire pour sa taille. Le paramètre peut être une chaîne de caractères ou un nombre, par exemple : "LARGE" o 17 .

Puis-je laisser React.PropTypes sait qu'il peut s'agir de l'un ou l'autre dans la validation des propTypes ?

Si je ne spécifie pas le type, j'obtiens un avertissement :

type d'hélice size n'est pas valide ; il doit s'agir d'une fonction, généralement issue de la technologie React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Answer 1

size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

En savoir plus : Vérification des types avec PropTypes

Answer 2

À des fins de documentation, il est préférable d'énumérer les valeurs de chaîne qui sont légales :

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),

Answer 3

Cela pourrait vous convenir :

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

Answer 4

Voici un exemple pro de l'utilisation de proptypes multiples et de proptypes simples.

import React, { Component } from 'react';
import { string, shape, array, oneOfType } from 'prop-types';

class MyComponent extends Component {
  /**
   * Render
   */
  render() {
    const { title, data } = this.props;

    return (
      <>
        {title}
        <br />
        {data}
      </>
    );
  }
}

/**
 * Define component props
 */
MyComponent.propTypes = {
  data: oneOfType([array, string, shape({})]),
  title: string,
};

export default MyComponent;

Answer 5

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string